Форум PHP программистов > Визуальный редактор

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Soldier Ghost

8.10.2009 - 02:10

Всем привет, в общем мне срочно понадобился визуальный редактор искал искал и остоновился на простеньком но в нём только 3 функции жирный, курсив и подчёркнутый мне нужно добавить туда свои функции не могу вот код:
Нужно сделать так чтобы в эти кнопки вбить значения CSS стилей чтоб стили в них прописать или ещё как нибудь помогите пжл

Код

// ***********************
// ШАГ 1: вывод iframe и получение доступа к нему
// ***********************

// Выводим в HTML-поток iframe
document.write("<iframe scrolling='no' frameborder='no' src='#' id='block-4' name='block-4' style='border:1px solid #000000; width:300px;'></iframe><br/>");
// Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
// Получаем доступ к объектам window & document для ифрейма
var iframe = (isGecko) ? document.getElementById("block-4") : frames["block-4"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;

// ***********************
// ШАГ 2: Добавим на пустую страницу ифрейма произвольный HTML-код
// ***********************

// Формируем HTML-код
iHTML = "<html><head>\n";
iHTML += "<style>\n";
iHTML += "body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}";
iHTML += "body {margin:5px;}";
iHTML += "</style>\n";
iHTML += "<body><u>Содержимое</u> с <b>HTML</b>-<i>разметкой</i></body>";
iHTML += "</html>";
// Добавляем его с помощью методов объекта document
iDoc.open();
iDoc.write(iHTML);
iDoc.close();

// ***********************
// ШАГ 3: Инициализация свойства designMode объекта document
// ***********************

if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
else iDoc.designMode = (isGecko) ? "on" : "On";

// ***********************
// ШАГ 4: Простейшие элементы редактирования: жирность, курсив, подчеркивание
// ***********************

// Выведем HTML-код этих элементов
document.write("<input type='button' value='Ж' onclick='setBold()' class='bold' />");
document.write("<input type='button' value='К' onclick='setItal()' class='ital' />");
document.write("<input type='button' value='Ч' onclick='setUnder()' class='under' />");
document.write("<input type='button' value='5656' onclick='setUnder1()' class='none' style='font-size:20px;'/>");
// Запишем код функции, для выставления форматирования
// Используется метод execCommand объекта document
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function setUnder() {
iWin.focus();
iWin.document.execCommand("underline", null, "");
}

Спустя 10 часов, 13 секунд (8.10.2009 - 11:10) Soldier Ghost написал(а):

Ну народ помогите!

Спустя 8 минут, 42 секунды (8.10.2009 - 11:19) glock18 написал(а):

Мой совет найти другой нормальный wysiwyg. Этот использует execCommand, который не очень то подходит для этого. И мне кажется, что команды для добавления/удаления классов там нет.

хотя вот список команд:
http://javascript.itsoft.ru/execcom/execCommands.html

может что-то и найдете там.

Спустя 9 минут, 52 секунды (8.10.2009 - 11:29) Soldier Ghost написал(а):

Я бы с радостью другой начал использовать да только найти не могу пробывал tinymce не смог в нём разобратся/установить.
Может вы знаете такой мне нужно всеголиш изменения цвета текста, изменение его размеров и жирный, курсив, подчёркнутый.

Спустя 8 минут, 59 секунд (8.10.2009 - 11:38) glock18 написал(а):

еще есть fckeditor. лучше чем tiny, по-моему.

если таки влом разбираться, то попробуйте
http://javascript.itsoft.ru/execcom/ForeColor.html
http://javascript.itsoft.ru/execcom/FontSize.html

HTML

document.write("<input type='button' value='Ж' onclick='setBold()' class='bold' />");
document.write("<input type='button' value='К' onclick='setItal()' class='ital' />");
document.write("<input type='button' value='Ч' onclick='setUnder()' class='under' />");

сюда допишите что-то типа

HTML

document.write("<input type='button' value='Р' onclick='setSize(14)' class='size' />");
document.write("<input type='button' value='Ц' onclick='setColor('#ff0000')' class='color' />");

в конец добавьте:

HTML

function setSize(size) {
iWin.focus();
iWin.document.execCommand("fontSize", size, "");
}

function setColor(color) {
iWin.focus();
iWin.document.execCommand("fontColor", color, "");
}

только вместо кнопок нужно будет добавить на свое усмотрение:
1. дропдауны для выбора цвета/размера
2. колорпикер для цвета

Спустя 5 минут, 35 секунд (8.10.2009 - 11:43) twin написал(а):

Вот неплохой редактор. Простенький и со вкусом. fckeditor тормозной уж больно имхо.

Спустя 2 часа, 40 минут, 27 секунд (8.10.2009 - 14:24) Soldier Ghost написал(а):

Спасибо твин и глок очень помогли )

_____________
Schecter damien 6 FR

Быстрый ответ:

Здесь расположена полная версия этой страницы.