Существует куча платных\бесплатных визуальных редакторов на любой вкус и цвет. Но что, если они работают не во всех браузерах, Вас не устраивает дизайн или функциональность, или просто душа лежит к написанию своего собственного? Ответ на вопрос, как это сделать — под катом.
Для визуального редактирования применяется режим designMode элемента iframe. Обычно редакторы встраиваются поверх тега textarea. Например, редактор TinyMCE умеет заменять их все на странице. Чтобы это реализовать:
— Найдем нужный элемент по его id
— Создадим контейнер для редактора, поместим туда текстарию.
Теперь нам надо добавить iframe и включить в нем режим редактирования. Сам тег мы добавим html-кодом, иначе не получится убрать у него стандартное оформление, например frameborder. С выходом opera 9.5 и firefox 3 многие редакторы, в частности редактор в Блоггере, на LJ и другие перестали функционаровать, в связи с введением защиты от XSS. Для корректной работы, необходимо, чтобы домен фрейма совпадал с доменом страницы нашего редактора.
Есть еще один нюанс, подстерегающий нас — это отличная от других объектная модель документа в IE. Итак:
— Создадим фрейм
— Добавим в него исходный код страницы и подставим значение из текстарии
— Включим режим редактирования
Теперь наш редактор готов ко вводу и форматированию текста. Стандартное форматирование — B I US применяется при помощи функции документа execCommand(), например
отформатирует текст как зачеркнутый.
Для вставки картинок и других объектов, нам потребуется определить выделенную область, а затем вставить туда код html
Итак, выше я изложил основные приемы создания wysiwyg редактора. Буду рад ответить на все вопросы.
Для визуального редактирования применяется режим designMode элемента iframe. Обычно редакторы встраиваются поверх тега textarea. Например, редактор TinyMCE умеет заменять их все на странице. Чтобы это реализовать:
— Найдем нужный элемент по его id
— Создадим контейнер для редактора, поместим туда текстарию.
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById(textarea_id);
var Container = document.createElement("DIV");
// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea);
Container.appendChild(Textarea);
Textarea.style.display = 'none';
Теперь нам надо добавить iframe и включить в нем режим редактирования. Сам тег мы добавим html-кодом, иначе не получится убрать у него стандартное оформление, например frameborder. С выходом opera 9.5 и firefox 3 многие редакторы, в частности редактор в Блоггере, на LJ и другие перестали функционаровать, в связи с введением защиты от XSS. Для корректной работы, необходимо, чтобы домен фрейма совпадал с доменом страницы нашего редактора.
Есть еще один нюанс, подстерегающий нас — это отличная от других объектная модель документа в IE. Итак:
— Создадим фрейм
— Добавим в него исходный код страницы и подставим значение из текстарии
— Включим режим редактирования
// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe style='width: 100%; height: 100%;' src=\"javascript: document.open(); document.domain='" +
document.domain + "'; document.close();\" frameborder='0'></iframe>";
Container.innerHTML = iframe + Container.innerHTML;
var Frame = Container.childNodes[0];
// Хитрое определение IE ;)
var isIE = /*@cc_on!@*/false;
// Выделим документ фрейма в отдельную переменную
var FrameDoc = isIE ? Frame.contentWindow.document : Frame.contentDocument;
FrameDoc.open();
// Если содержимое тега body будет пустым, в FF курсор станет каким-то через-чур маленьким.
// Чтобы этого избежать, добавим & nbsp; (без пробела)
FrameDoc.write('<html><head></head><body>'+ Textarea.value +'& nbsp;</body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";
Теперь наш редактор готов ко вводу и форматированию текста. Стандартное форматирование — B I U
FrameDoc.execCommand("Strikethrough", false, '');отформатирует текст как зачеркнутый.
Для вставки картинок и других объектов, нам потребуется определить выделенную область, а затем вставить туда код html
// Если в IE не установить фокус на окне редактируемого фрейма,
// то в дальнейшем он может вставить код наверх вашей страницы, а не во фрейм ;)
Frame.contentWindow.focus();
var SelectionRange = isIE ? FrameDoc.selection.createRange() : Frame.contentWindow.getSelection().getRangeAt(0);
// вставим картинку
var html = "<img src='mypicture.gif' />";
if (isIE) {
// тут все просто
SelectionRange.pasteHTML(html);
} else {
// для остальных используем вспомогательный тег
SelectionRange.deleteContents();
var el = document.createElement("SPAN");
FrameDoc.getElementsByTagName("BODY")[0].appendChild(el);
// Firefox не поймет, если вы сразу замените outerHTML. В версиях ниже 3-ей такое свойство вообще у него отсутствует.
el.innerHTML = html;
SelectionRange.insertNode(el);
el.outerHTML = html;
}
Итак, выше я изложил основные приемы создания wysiwyg редактора. Буду рад ответить на все вопросы.