Пишем простейший WYSIWYG (визуальный редактор) на Javascript
Задача: написать простейший визуальный редактор и немного разобраться как он работает.
Что такое WYSIWYG?
WYSIWYG — аббревиатура What You See Is What You Get. В переводе: «что вижу, то и получаю». В висивиге можно просматривать и редактировать HTML-содержимое не редактируя HTML-код. Наиболее близкая аналогия ВИСИВИГу — это текстовый процессор от Microsoft Word, с которым многие знакомы. В нем, чтобы поставить жирность или курсив, не нужно писать теги или другие элементы форматирования, достаточно просто нажать соотствующую функциональную кнопку.
Как это работает?
Для написания простого ВИСИВИГа не нужно изобретать велосипед, все средства уже встроены и успешно работают. Механизм работы большинства визуальных редакторов основан на свойстве designMode объекта document. Это встроенное свойство (к сожалению, далеко не для всех браузеров, но для большинства современных) как раз и позволяет редактировать HTML-контент. После его активанции (designMode=’On’) на web-страницу можно ставить привычный нам курсор и набивать, удалять или изменять форматирование контента.
Бывает удобно не редактировать всю страницу, а иметь какую-то фиксированную область, для чего используется iframe. Именно его объект document используется для активации свойства designMode.
Форматирование содержимого в пределах ВИСИВИГа осуществляется с помощью непростого метода execCommand, реализация которого сильно различается от браузера к браузеру.
Смотрим JavaScript-код для простейшего ВИСИВИГа:
// *********************** // ШАГ 1: Выводим iframe и получаем доступ к нему // *********************** // Выводим в HTML-поток iframe document.write(»
«); // Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE var isGecko = navigator.userAgent.toLowerCase().indexOf(«gecko») != -1; // Получаем доступ к объектам window & document для ифрейма var iframe = (isGecko) ? document.getElementById(«frameId») : frames[«frameId»]; var iWin = (isGecko) ? iframe.contentWindow : iframe.window; var iDoc = (isGecko) ? iframe.contentDocument : iframe.document; // *********************** // ШАГ 2: Добавим на пустую страницу ифрейма произвольный HTML-код // *********************** // Формируем HTML-код iHTML = «n»; iHTML += «
n»; iHTML += «
Содержимое с HTML—разметкой«; iHTML += ««; // Добавляем его с помощью методов объекта 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(«»); document.write(«»); document.write(«»); // Запишем код функции, для выставления форматирования // Используется метод execCommand объекта document function setBold() < iWin.focus(); iWin.document.execCommand("bold", null, ""); >function setItal() < iWin.focus(); iWin.document.execCommand("italic", null, ""); >function setUnder()Данная версия визуального редактора не может работать в Опере ниже версии 9.01 и покажет предупреждение «Визуальный режим редактирования не поддерживается Вашим браузером». Работоспособность проверена в:
— IE 6;
— FF 1.5;
— Opera 9.01 +;
— Mozilla 1.7.2;
— NN 7.1 +;
Делаем визуальный редактор в HTML своими руками
Года два назад скриншоты визуального редактора на сайте www.saitistika.ru вызывали восхищение и в то же время недоверие. Каждому, кто хоть немного знаком с HTML, очевидно, насколько ограничены возможности по управлению стандартной формой textarea. И, казалось бы, это единственный инструмент для ввода многострочных текстов в HTML, не считая ActiveX-включений. Однако с распространением Open Source кланов визуального редактора RichEditor оказалось, что разработчиками MS Internet Explorer предусмотрен многофункциональный интерфейс для ввода и правки текстов в пользовательских формах (стабильная работа метода поддерживается в IE версии от 5.0 и выше). И, более того, для включения этого интерфейса достаточно лишь установить одно «волшебное» свойство designMode в значение «on».
И как же это делается? Да очень просто. Мы создаем в HTML-коде страницы редактора объект (для этих целей подойдет конструкция iFrame) и идентифицируем его. Скажем, как newTextArea.
Далее добавляем Java-script-код с одной командой:
Попробуйте теперь открыть полученный HTML-файл в IE. Перед нами просторное поле ввода. Вы наверняка сразу же принялись набирать текст. Попробуйте стандартные для Windows команды редактирования (Ctrl-Z — для отката назад, Ctrl-B — для установки стиля выделенного текста в Bold, Ctrl-I для установки стиля в Italic и т.д.). Однако вслед за восторгом от открывающихся перспектив предупреждающим сигналом в сознании звучит: «А как же это использовать практически?!». Для начала нам может понадобиться загрузить в окно редактора какой-либо текст. Это можно сделать стандартной печатью в объект.
newTextArea.document.writeln('Текст'); Хотя, по всем правилам, стоит открыть и закрыть документ объекта
newTextArea.document.open(); newTextArea.document.writeln('Текст'); newTextArea.document.close(); если у вас возникло желание приукрасить текстовое поле. Таким же образом можно направить в объект редактора таблицу стилей (CSS). Но какой смысл вводить или редактировать текст, если нет возможности сохранить изменения?! А сохранить их тоже очень просто. Достаточно создать в начале документа форму, а в ее теле — скрытое поле.
Скажем, имя нашей формы будет myform, имя скрытого поля message. Теперь используем это поле как идентификатор. Мы создадим в теле основного документа кнопку, которой назначим событие:
document.myform.message.value = newTextArea.document.body.innerHTML; myform.submit();
Тем самым мы присваиваем объекту Java-script message содержимое поля ввода редактора на данный момент. И после этого передаем содержимое формы myform на сервер. На стороне сервера мы можем принять содержимое формы посредством сервер-ориентированного языка программирования. Но это уже совсем другая история.
Вам наверняка попадались на глаза буклеты от разработчиков систем управления контентом с заявленной там совместимостью их визуальных редакторов с MS-Word. Желаете заявить то же самое о своем редакторе? Заявляйте смело. Попробуйте открыть в MS-Word какой-либо документ со сложной разметкой. Скопируйте содержимое документа в своей редактор. Удивлены? Документ с большего сохранил свою разметку — и уже в вашем редакторе.
Да и картинки, которые были в исходном документе, тоже перенеслись. Только вот с картинками не все так просто, как хотелось бы. При сохранении документа они потеряются по той простой причине, что редактируемый HTML-документ содержит лишь ссылки на изображения, реально расположенные во временных папках вашего компьютера. Впрочем, первоначальный восторг подпортит еще и тот факт, что MS-Word версии 2000 и выше имеет скверную особенность передавать в буфер документ не в запрошенном HTML-формате, а в формате XHTML, что подразумевает просто безмерное описание каждого мало-мальского фрагмента форматирования документа. В результате XHTML-документ имеет реальный размер, в несколько раз превышающий исходный документ MS-Word. Очевидно, что когда видимые пара страниц текста реально занимают сотню килобайт, мало кто согласится ждать их загрузки с сервера в интернете.
Но все перечисленное на самом деле не проблемы, это — задачи, которые, соответственно, имеют решения. Содержание документа при сохранении мы можем «подчищать». Скажем, в PHP и Perl есть потрясающий механизм для подобного рода действий — функции регулярных выражений preg. Что же касается использования изображений в редактируемом документе, то стоит написать сервисную функцию, которая позволит пользователям самостоятельно добавлять в содержание изображения. Она же позаботится о предварительной загрузке (upload) изображений на сервер.
И если мы уже заговорили о сервисах, то не лишним будет заметить, что отсутствие в нашем редакторе столь привычной для офисных приложений «панели инструментов» вряд ли приведет в восторг пользователей. Так что вместо того, чтобы публиковать на странице редактора список «горячих» клавиш, давайте вообразим себя дизайнерами интерфейса, нарисуем и поместим ожидаемую «панель инструментов». «Кнопкам» этой панели мы самостоятельно назначим наиболее используемые команды форматирования.
Делается это следующим образом. Сначала мы назначаем объекту выделенную в редакторе область текста
var tr = frames.newTextArea.document.selection.createRange();
Далее выполняем над данной областью команду форматирования
Теперь восстанавливаем выделение, возвращаемся в документ.
tr.select(); frames.newTextArea.focus();
Наиболее часто используются команды:
Italic — наклонный шрифт
Underline — подчеркивание
JustifyLeft — левое выравнивание
JustifyCenter — центровка по центру
JustifyRight — правое выравнивание
InsertOrderedList — ненумерованный список
InsertUnorderedList — нумерованный список
Возможны комбинированные команды:
tr.execCommand('FontSize', false, '3'); tr.execCommand('FontName', false, 'Verdana'); Итак, если собрать рекомендации данной статью воедино, самое меньшее, что мы получим:
Теперь вам понадобится толика знаний HTML и Java-script, огромное желание удивить мир, и вы его наверняка удивите. По крайней мере, ваши новоиспеченные гостевые книги наполнятся симпатичными сообщениями благодарных посетителей.
Дмитрий ШЕЙКО,
студия веб-разработок НТЦ "АТЛАС",
sheiko.belsl.com