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.
Продолжение следует
Илья Муравьев
Так или иначе, но с 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.
Продолжение следует
Илья Муравьев
Компьютерная газета. Статья была опубликована в номере 38 за 2006 год в рубрике интернет
