WYSIWYG в подробностях

Вступление

Так или иначе, но с HTML знакомы все пользователи сети Интернет. Благодаря своей простоте этот язык разметки обрел большую популярность на просторах WWW. Освоить же HTML-азы и создать веб-страничку под силу практически любому. 

HTML-верстка — занятие отнюдь не занудное и неприятное, как может показаться на первый взгляд. Наоборот, оно начинает приносить некое эстетическое удовольствие — правда, при определенных навыках и средствах. Под средствами прежде всего подразумевается программное обеспечение. ПО много, и оно, конечно же, разнообразное. Когда заходит речь об используемом при HTML-верстке инструментарии, каждый придерживается определенной точки зрения. Кому-то удобно работать с такими профессиональными и полнофункциональными продуктами, как Macromedia Dreamweaver или Microsoft FrontPage. Другой останавливается на свободных некоммерческих продуктах типа NVU, объясняя свой выбор бесплатностью и незагруженностью программы. Есть и такие виртуозы, которые для создания HTML-страниц предпочитают пользоваться… «Блокнотом».

По большому счету, это не очень-то и удивительно, ведь многие HTML-редакторы оставляют после себя много «мусора»: пометок, комментариев, пустых контейнеров и т.п. Тем не менее, вполне очевидно, что вариант с Notepad’ом совсем нерационален по соотношению время/результат. Вышеперечисленные продукты (кроме «Блокнота»:)) принято относить к категории WYSIWYG-редакторов (английская аббревиатура WYSIWYG — «What You See Is What You Get» — переводится как «что видишь, то и получаешь»). Работа в таких программах очень наглядна, о чем свидетельствует даже само название. Вы всегда видите результаты и в любой момент можете внести любые коррективы, причем и исходный код, и дизайн доступны для правки. В режиме реального времени ваши действия внутри редактора (манипуляции мышью, нажатия на кнопки и т.д.) особым образом трансформируются в HTML. Верстка внутри WYSIWYG относительно проста и удобна. А ведь эти и многие другие факторы в обязательном порядке отразятся на качестве и скорости работы, не так ли? Но HTML-редакторы далеко не всегда под рукой.

Это незадача, если вы хотите опубликовать достаточно объемный материал в аккуратном, читабильном виде на своем сайте, находясь, так сказать, «вне лаборатории». Пускай даже это будете не вы, а другие содержатели, посетители ресурса. В таком случае для решения проблемы можно воспользоваться одним из браузерных WYSIWYG-редакторов. Сегодня и в дальнейшем, читатель, мы будем говорить преимущественно о них. Знакомьтесь, первый участник.

TinyMCE

Разработчик: Moxiecode Systems AB.
Лицензия: LGPL.
Сайт поддержки: www.tinymce.moxiecode.com.
Совместимость с браузерами: MSIE 5-6, Mozilla 1.7.x, Firefox 1.0.x-1.5b2, Opera 9 Preview 1 (данные приведены согласно документации разработчиков и относятся к ОС Windows XP. Со значительной степенью вероятности можно судить, что TinyMCE стабильно работает в браузерах более поздних и некоторых ранних версий, а также в других ОС семейства Windows).
Размер дистрибутива: 0,5 Mb/2,5 Mb.

Обзор начнем с самого известного WYSIWYG-редактора. Конечно, вы можете и не загружать полумегабайтный архив с сайта разработчиков, ведь TinyMCE легко найти в составе многих CMS, но не исключено, что это будет устаревшая и весьма облегченная версия пакета. Поэтому мой совет: лучше скачайте оригинальный комплект: в нем присутствует подробная документация и полный набор plugin’ов. Рассматриваемая мной версия редактора — 2.0.6.1 — видимо, по ошибке, датирована 4 маем 2005 года (в changelog’е имеются и более ранние релизы, вышедшие, однако, в 2006 году). А, впрочем, это и не столь важно. Архив TinyMCE содержит три каталога: 

/docs — англоязычная документация
/examples — примеры работы WYSIWYG
/jscripts — исполняемые файлы редактора: скрипты, плагины, темы и утилиты
Из справочной информации наибольший интерес представляет инструкция по установке (/docs/installing.htm). 

Установка

Исходя из содержания руководства, инсталляция TinyMCE осуществляется примерно следующим образом. Директория /jscript со всеми вложенными документами переносится, например, в D:edit, там же создается файл edit.html. Он будет отвечать за инициализацию и вывод WYSIWYG-редактора в окне браузера. 

- edit.htm –

<html>
<head>
<title>TinyMCE</title>
<script language="javascript" type="text/javascript" 
//указываем расположение главного скрипта tiny_mce.js
src="./tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript">
//инициализируем скрипт tiny_mce.js
tinyMCE.init({ 
...
});
</script>
</head>
<body>
<form method="post">
//команда на создание формы (области) ввода текста, где фактически cols — длина, rows — ширина
<textarea name="content" cols="93" rows="25"> </textarea>
</body>
</html>

- edit.htm –

К edit.html мы скоро вернемся, а пока опять обратимся к документации. В конце страницы /docs/installing.html вы могли заметить четыре ссылки на примеры интеграции. Так, Example 00 отображает редактор с простым интерфейсом (Example 00), Example 01 (Advanced Theme) — со сложным, «продвинутым», Example 02 приводит к еще более усложненной теме и т.д. Это значит, что в зависимости от способа инициализации TinyMCE по-определенному «перестраивается» и меняет свой вид. А теперь посмотрите исходный код одного из примеров, и вы поймете, каким образом наш WYSIWYG конфигурируется. 

– Просмотр исходного кода страницы: горячие клавиши –Mozilla Firefox: Ctrl+U (курсор должен находиться вне текстового поля)Opera: Ctrl+F3Internet Explorer: Вид > Просмотр HTML-кода (только таким образом:))

(Для показательности как пример приведу Example 02). Вначале инициализируется скрипт:

tinyMCE.init({ 

, далее определяются метод (mode) и тема: 

mode : "textareas",
theme: "advanced", 

, подгружаются плагины и, согласно названию темы, изображения кнопок, сепараторы и пр. Затем скрипт завершает загрузку:

});
</script>

Троеточие в edit.html поставлено неспроста. Сейчас вы можете сами сконфигурировать загрузку TinyMCE, вставив вместо трех точек фрагмент из примера и удалив, скажем, ненужные плагины и кнопки. Правда, пока для начала лучше оставить заготовленный шаблон инициализации. Откройте созданный файл в баузере. Не беда, если, кроме текстового поля, ничего не отобразится. Просто еще раз проверьте содержание edit.html, точнее, правильность пути к tiny_mce/tiny_mce.js.

src="./tiny_mce/tiny_mce.js"

Точка перед слэшем ставится потому, что скрипт tiny_mce.js по уровню располагается ниже html-файла. Будь наоборот, поставили бы две точки (как в примерах Example 00-03).

Наводим порядок


Перед началом работы не помешает довести TinyMCE до ума, подправив некоторые настройки, касающиеся преимущественно интерфейса редактора. Его оформление напоминает внешний вид Microsoft Office: красиво и удобно. Но в то же время скрипты, на которых и базируется WYSIWYG, потребляют трафик и периодически загружают ресурсы. Есть одно средство, которое позволяет сократить время за- и нагрузки TinyMCE в несколько раз — это скрипт TinyMCE Compressor PHP (4 Kb, доступен на сайте разработчика). Благодаря gzip-архивации компрессор сжимает все java-скрипты в один файл и разделяет запросы TinyMCE на несколько потоков, чем и достигается прирост быстродействия. Для подключения скрипта необходимо скопировать его в каталог расположения tiny_mce.js, а в edit.html изменить название файла с «tiny_mce.js» на «tiny_mce_gzip.php». Учтите, что с этого момента WYSIWYG-редактор не будет работать вне среды виртуального сервера. PHP, как-никак! 

TinyMCE не помешала бы русификация. Вообще языковые модули редактора разбросаны по разным местам: в папке /langs, в плагинах — /plugins — и в темах — /themes/advanced, /themes/simple. Следовательно, для нормальной русификации необходимо наличие файлов предпочитаемого языка во всех перечисленных местах. Стандартный комплект WYSIWYG содержит лишь английский языковые файлы, остальные language-packs есть на http://tinymce.moxiecode.com/download.php. Однако скачать файлы и разместить их в указанных местах недостаточно. В коде инициализации (edit.html) добавьте строчку «language : "ru"» (кавычки опускаются), не забыв в предыдущей строке поставить запятую (!). Для корректного отображения русских символов в браузере вам, возможно, придется сменить кодировку на win-1251, KOI8-R или UTF-8. Из области косметических изменений. Во все том же edit.html удалите строчку 

theme_advanced_path_location : "bottom"

Мы, к сведению, убрали совершенно лишнюю строку состояния, отображающую путь к теме оформления. Поле редактирования (textarea) возможно увеличить еще больше — за это отвечают параметры cols и rows. И последнее. В TinyMCE имеется кнопка Помощь, которая вызывает окно со справочным содержанием. Жаль, что вторая вкладка этого диалога приводит на страницу Not Found. Исправляется данный недостаток командой 

docs_language : "en"

Обзор плагинов


Любой доскональный WISYWIG-редактор обладает такой «фишкой», как модульность, то есть расширяемость. TinyMCE в этом плане не стал исключением. В его составе более 20 плагинов, разнящихся по степени важности и функционалу. Каждый модуль поддается тонкой настройке, благо js-html-css-код к этому располагает:). Дополнительный интерес вызывают исходные закомментированные файлы java-скриптов (editor_plugin_src.js). Подключение и конфигурирование плагинов не представит ровно никакой сложности, если вы обратитесь к разделу Plugins Reference (/docs/reference_plugins.html) документации. Самое важное (установка, опции, примеры инициализации) — там. (Обратите внимание: в Initialization Example плагина Advimage строку «plugins : "preview"» следует читать как «"plugins : " advimage "». Это одна из подобных ошибок документации.) 

Advhr — добавление горизонтального разделителя. В Mozilla FF плагин не действует, а IE и Opera отказываются показывать диалог параметров вставки (ширина, размер, с тенью или без тени).

Advimage — вставка изображения с расширенными (пускай даже «стандартно расширенными») возможностями. Полезную роль здесь исполняет окно предварительного просмотра: есть уверенность, что указанный к картинке путь правильный. Размер изображения, если вы оставили соответствующие поля пустыми, определяется автоматически. 

Advlink — плагин для создания ссылок. 

Contextmenu — вызывает контекстное меню редактора. Кому не нужно –смело отключайте. Хотя наверняка будут проблемы со вставкой таблиц.

Emotions — плагин, упрощающий вставку смайлов. Коллекция по умолчанию заимствована у Mozilla Thunderbird. И, кстати, никто не запрещает вам использовать другие смайлы, например, из Opera (рекомендую:)). Сама же таблица с изображениями легко модифицируется путем редактирования файла emotions.htm.

Flash — на панели инструментов TinyMC появляется кнопка вставки Flash-ролика. Опции добавления незамысловатые: указываются путь к файлу (абсолютный; автоматически преобразуется в относительный) и размер объекта. 

Style — плагин, предназначенный для настройки стиля страницы. Открыв диалог «Edit css style», вы можете сделать то же самое, что, в принципе, легче и наглядней написать самостоятельно — в отдельном css-файле, а затем добавить в загрузку редактора как стиль по умолчанию:

content_css : "http://localhost/styles.css"

Layer — менеджер работы со слоями в WYSIWYG.

Iespell — спеллчекер, у которого, к сожалению, преимуществ меньше, чем недостатков. Во-первых, плагин неработоспособен без утилиты IeSpell, которую, в свою очередь, нужно скачать с www.iespell.com/download.php (2 Mb). Во-вторых, Iespell проверяет только английскую орфографию. И хотя русские *.doc-словари возможно подключить как дополнительные, никакой функции они исполнять не будут. Наконец, третье: какой смысл использовать спеллчекер, работающий в IE и тормозящий его:)?.. 

Insertdatetime — две кнопки на панели инструментов: Вставить дату и Вставить время. Опции следующие: 

plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S"

Остальные переменные описаны в документации

Paste — вставка текста из Word’а без потери форматирования. Однако не совсем понятно, почему данная функция срабатывает через комбинацию клавиш Ctrl+V, а через диалоговое окно (Вставить из Word) форматирование теряется. Также мною замечено, что плагин Paste ведет себя неправильно, если в инициализации имеется строка content_css : «...». Закомментируйте ее — «//» 

Preview — плагин предварительного просмотра. В TinyMCE превью появляется как pop-up — всплывающее окно, размеры которого определяются параметрами в инициализации:

plugin_preview_width : "600",
plugin_preview_height : "400" 

Еще одна опция: 

plugin_preview_pageurl : "../../plugins/preview/example.html" 

С ее помощью можно изменить стиль окна просмотра, указав адрес HTML-странички с определенным вами оформлением.

Print — стандартная для HTML-редактора возможность — печать содержимого страницы.

Save и Autosave — функция (авто)сохранения; работает исключительно в TinyMCE, интегрированном с CMS: там HTML-код передается напрямую в базу данных.

Searchreplace — плагин с возможностью поиска и замены текста. 

Table — менеджер таблиц в TinyMCE. Возможностей плагина вполне достаточно (см. /docs/plugin_table.html), однако, на мой взгляд, редактировать таблицы через веб-интерфейс неудобно. Советую вам предопределить table-, table_cell- и table_row-стили в инициализации. 

Zoom (MSIE5.5+) — добавляет на панель инструментов выпадающее меню увеличения содержимого редактируемой области (вплоть до +250%). 

Directionality — облегчает верстку текста справа налево (актуально для некоторых иностранных языков). 

Fullscreen — достаточно полезная функция, которая позволяет работать с TinyMCE в полноэкранном режиме. В отличие от аналогичной опции браузера, вместе с окном изменяется размер области редактирования. Одна проблема: всплывающее окно просмотра отображает текст в кодировке iso-8859-1, искажая русифицированный интерфейс редактора до неузнаваемости. Выход из такого положения — в файле fullscreen.htm плагина найти и заменить charset=iso-8859-1 кодировкой используемого WYSIWYG языка. И не поленитесь обновить содержимое окна браузера.

Fullpage — отличный в плане опциональности плагин, работающий, к сожалению, только в MSIE. Заголовок, описание, автор документа, настройки шрифтов, цветов, путь к файлу стилевого оформления и другое — настроек действительно много. Немаловажно, что настройки по умолчанию вы можете прописать в скрипте загрузки TinyMCE:

//Кодировка документа по умолчанию
fullpage_default_encoding : 'utf-8',

//Языковой код документа
fullpage_default_langcode : 'ru',

//Заголовок документа
fullpage_default_title : "Document title"

Inlinepopups — сомнительного предназначения plugin для поклонников «ретро». Заменяет верхнюю рамку окна на другую, упрощенную (окна с такими рамками браузер не посчитает за всплывающие). Носит пометку «experimental» и в Firefox работает нестабильно.

Заключение

Как видите, TinyMCE — это функциональный, гибкий в настройке WYSIWYG-редактор с возможностью русификации и смены оформления. Настраиваемы и плагины, которых только официальных немалое количество. Что неудивительно, на Tiny давно обратили внимание разработчики большинства популярных CMS: Mambo, Drupal, WordPress... TinyMCE либо входит в их состав по умолчанию, либо доступен как модуль. Вопросов с интеграцией не будет — это точно. Тем не менее, есть не один WYSIWYG-редактор, который может составить TinyMCE альтернативу. Например, тот же FCKeditor (www.fckeditor.net). О нем, собственно, и пойдет разговор в продолжении. Вопросы по теме статьи задавайте на форуме.

Ссылки:
www.ilyuha.ho.com.ua/downloads/tiny_mce.7z  — моя сборка TinyMCE версии 2.0.6.1.
www.sourceforge.net/tracker/?atid=738747&group_id=103281&func=browse  — 3rdParty-плагины для TinyMCE на SourceForge.

Продолжение следует

Илья Муравьев<!-- end -->
© компьютерная газета



Опубликовал admin
14 Дек, Пятница 2007г.



Программирование для чайников.