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 S применяется при помощи функции документа execCommand(), например

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 редактора. Буду рад ответить на все вопросы.

wysiwyg своими руками

Публикации

Ближайшие события