Блог iZerO.Ru

Так или иначе, но с 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 (данные приведены согласно документации разработчиков и относятся к ОС 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 со всеми вложенными документами переносится, например, в папку edit, там же создается файл edit.html. Он будет отвечать за инициализацию и вывод WYSIWYG-редактора в окне браузера.

- edit.htm –

Троеточие в 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://www.izero.ru/out/UEBAFAIXGkQMV00LUAAbCFZODFVUVl1cSAFfDh9UCRJWWFsFXBZFWBU=/. Однако скачать файлы и разместить их в указанных местах недостаточно. В коде инициализации (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://www.izero.ru/out/UEBAFAIXGlwKWlUKWwpGERZFEUlbXEoXBRFDgbCt/

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 превью появляется как popup – всплывающее окно, размеры которого определяются параметрами в инициализации:

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-редактор с возможностью русификации и и смены оформления. Настраиваемы и плагины, которых только официальных – немалое количество. Что не удивительно, на «Тини» давно обратили внимание разработчики большинства популярных CMS: Mambo, Drupal, WordPress, … TinyMCE либо входит в их состав по умолчанию, либо доступен как модуль. Вопросов с интеграцией не будет – это точно.

Тем не менее, есть не один WYSIWYG редактор, который может составить TinyMCE альтернативу. Например, тот же FCKeditor (www.fckeditor.net). О нем и пойдет разговор в продолжении.