WYSIWYG – это наглядный редактор (прежде всего, для текста): вы выделяете фрагмент, нажимаете в управляющей панели кнопку B – и фрагмент становится жирным. Так можно делать, например, в Ворде, или в некоторых почтовых программах при написании писем. Так нельзя делать, например, в редакторе «Блокнот».
Редактор для веб-сайта может быть вообще без оформления, как «Блокнот» (например, при заполнении анкеты или профиля пользователя); может быть наглядным, как Ворд; и может быть «линейным», как BB-code: при нажатии на кнопку B текст не становится сразу жирным, а вместо этого автор видит появление меток [B] и [/B] вокруг выбранного фрагмента, а жирным фрагмент отображается при просмотре сообщения другими пользователями.
Наглядный редактор сайта является разновидностью редактора сайта вообще. А в общем случае редактор сайта отличается от редактора типа Ворд или Блокнот отсутствием сочетания клавиш Ctrl+S (команда «Сохранить»). Потому что на сайте нельзя непосредственно сохранять файлы, как на своём рабочем столе. На сайте все сохранения делаются через... ну, не совсем то, что вы сейчас подумали – через HTML-формы. Через форму, видимую в браузере, пользователь отправляет текст на сервер с помощью большой кнопки «Создать новую тему» или «Отправить ответ» (или уж совсем просто – «Сохранить»), а там серверный скрипт (чаще всего, PHP) записывает текст в хранилище. Этим хранилищем может быть, конечно, и файл, но гораздо чаще тексты на сервере хранятся всё-таки в базе данных MySQL (что мы и будем считать правилом, а все другие случаи – исключениями).
Мы говорим также о каком-то большом фрагменте текста (сообщения на форуме или целой статьи), который может достигать размера, например, в 5 или 105 килобайт. Что приводит нас к неизбежности появления в нашей HTML-форме элемента textarea (многострочное поле для редактирования произвольного текста). Форма с элементом textarea позволяет отправлять на сервер неформатированный (простой) текст, как из Блокнота; она позволяет также отправлять и текст с линейным форматированием (с видимыми метками BB-code).
Для наглядного форматирования нужно использовать возможность самого браузера превращать внешние метки в видимые жирный или курсив. То есть редактировать текст не в специальном элементе textarea, а прямо в общем окне с документом. Для этого достаточно написать на javascript простую инструкцию: document.designMode = "on". Если выполнить эту инструкцию после загрузки страницы (например, поместив её в конец страницы в элемент script), вы сможете свободно удалять и добавлять текст, а также менять его оформление (например, с помощью сочетания клавиш Ctrl+B – «полужирный»).
Но кроме жирного и курсива вы ничего сделать не сможете. Потому что для всего остального не существует сочетания клавиш, а нужно программировать специальные кнопки, а кнопки в режиме designMode = "on" работать не будут (зато у них можно будет менять текст и размер). Не будет работать и кнопка «Сохранить» (или «Записать»). Так что вы сможете более-менее что-то отредактировать, но не сможете отправить на сервер и записать в базу данных.
Эта дилемма с неизбежностью приводит нас к появлению элемента iframe: именно в нём находится редактируемый документ в состоянии designMode = "on", а все управляющие элементы и HTML-форма с элементом textarea находятся на главной странице (внутри которой создаётся iframe). А после завершения наглядного форматирования внутри iframe весь HTML-код отформатированного документа (программно, с помощью javascript) передаётся в textarea и только тогда может быть отправлен для сохранения на сервер.
Крайне неразумно выглядят два элемента с примерно одинаковым текстом, расположенные рядом (iframe и textarea) – их соседство создаст невозможную путаницу. Надо оставить что-то одно. И угадайте, что это будет, если наш редактор называется визуальным? Следующая неизбежность – скрытие элемента textarea (которому мы между делом присвоили id='big_value'), например, с помощью правила CSS textarea#big_value {display:none;}.
1. Иногда необходимо видеть именно HTML-код редактируемого текста, а не его визуальное отображение. Мы знаем минимум два таких случая: для отладки самого редактора и для работы пользователя с более высоким уровнем (для которого работа в WYSIWIG – это попытка рисовать карандашом в верхонках, и которому проще напрямую поправить кусок кода). Поэтому в наглядном редакторе должна быть кнопка-переключатель с визуального отображение к HTML-коду и обратно.
2. У элемента iframe обязательно должен быть атрибут src (например, src='about:blank'). Иначе в некоторых браузерах (типа Оперы) может возникнуть проблема.
3. Редактируемому документу во фрейме надо добавить те же файлы стилей, что и для реальных страниц сайта. Написав, например, в начало документа такой код:
4. Следует подавить соблазн загружать во фрейм специально подготовленный файл с html-шаблоном (включающим приведённый код). То есть нельзя создать файл edit.tpl.html и загружать его в iframe редактора с помощью атрибута src. Потому что это создаст ненужные хлопоты по отслеживанию загрузки двух разных окон – главного и внутри iframe (над вами всегда будет висеть риск попытки писать текст в ещё не загруженное окно). Код с doctype и стилями лучше записывать в документ фрейма с помощью javascript, чтобы всё было единообразно (как в армии).
5. На сервер в хранилище (БД) мы можем отправить только текст из формы, но никак не из элемента iframe. А редактируем текст преимущественно в наглядном представлении (а не в форме). Поэтому при нажатии на кнопку «Сохранить» надо не забыть перевести то, что мы видим, в «машинные коды» и скопировать в textarea в форме. То есть кнопка «Сохранить» не должна работать по умолчанию (тупо отправлять форму на сервер).
В результате соблюдения этих несложных правил, получим примерно вот что: http://ir2.ru/static/wysiwyg/vis1.htm. Это практически голая, минимальная схема визуального редактора. Точнее, его части, расположенной на стороне клиента. Для начала работы пока не хватает серверной части: идентификации таблицы и строки, в которую добавляется (или в которой редактируется) текст, а также (главное!) обработки опасных HTML-тэгов (например, script), которые нельзя пропускать на сайт.
Ну, и у нас нет никаких кнопок форматирования. В некоторых браузерах для жирного и курсива можно использовать сочетания клавиш. Или ещё можно просто копировать текст из Ворда – всё оформление сохранится.