Сайт Дмитрия Величко (aka Mityok)

Достаточно часто встает задача реализации на сайте визуального редактора для создания и редактирования материалов. Я для своего сайта выбрал редактор TinyMCE, который обеспечивает достаточное удобство работы, имеет встроенную поддержку русского языка, кроме того для него есть дополнительный модуль IMCE который позволяет вставлять в документ ранее загруженные изображения. Приступим к установке редактора.

Шаг 1: Установка файлов модуля.

Скачиваем архив наиболее свежей версии модуля по адресу http://drupal.org/project/tinymce, распаковываем архив в каталог sites/all/modules/tinymce.

После этого идем на официальный сайт TinyMCE и скачиваем последнюю стабильную версию редактора. На момент написания этих строк послдней стабильной версией являлась версия 2.1.3. Там же можно скачать файлы поддержки русского языка для редактора. Для нормальной работы с кодировкой UTF-8 вам нужен файл локализации с названием "ru", а не "ru_UTF-8" Распаковываем архив в каталог sites/all/modules/tinymce/tinymce. В результате должно получиться следующая стрктура каталогов:

sites/all/modules/tinymce/

sites/all/modules/tinymce/tinymce/

sites/all/modules/tinymce/tinymce/jscripts

Если вы решили установить поддержку русского языка, то распакуйте содержимое архива timymce_lpackage.zip в каталог sites/all/modules/tinymce.

Примечание: после распаковки дистрибутива TinyMCE не забудьте удалить с сервера каталог examples, он там совершенно не нужен.

Шаг 2: Включение модуля.

Для того, чтобы разрешить использование модуля перейдите в раздел "Управление сайтом > Конструкция > Модули" (admin/build/modules), и активируйте модуль TinyMCE в списке доступных модулей. Если модуль TinyMCE в списке отсутствует, значит вы что-то сделали не так на первом шаге.

Шаг 3: Русификация интерфейса модуля.

Файлы поддержки русского языка для модуля Drupal TinyMCE можно скачать по адресу http://drupal.ru/node/2598. Скачиваем файл tinymce_ru_po.zip, распаковываем его во временный каталог на локальной машине. Далее открываем "Управление сайтом > Настройка > Переводы" (admin/settings/locale) и выбираем вкладку "Импортировать". Выбираем для загрузки файл tinymce-module_ru.po, и нажимаем на кнопку "Импортировать".

Шаг 4: Начальная настройка модуля

Прежде чем настраивать сам модуль TinyMCE, необходимо указать права доступа для пользователей, которым будет разрешено использование визуального редактора. Например, мы хотим разрешить использование TinyMCE для авторизованных (залогиненых) пользователей. Для этого перейдем на страницу "Управление сайтом > Пользователи > Контроль доступа" и отметим для роли "authenticated user" привилегию "access tinymce".

После активации модуля на странице "Управление сайтом > Настройка" (admin/settings) должна появиться ссылка на страницу настройки TinyMCE (admin/settings/tinymce). Откройте эту страницу, приступим к настройке модуля.

Для нормальной работы редактора нужно создать хотя бы один профиль (набор настроек), который будет использоваться на сайте. В дальнейшем вы сможете создать набор профилей и предоставить различную функциональность редактора для разных ролей пользователей. Для начала, перейдем по ссылке "создать новый профиль" (admin/settings/tinymce/add) и выполним настройку базового профиля.

В блоке настроек "Основные установки" заполняем обязательное поле "Имя профиля", указываем, например, default.

Далее указываем роли, которые могут использовать данный профиль, пусть это будет роль "authenticated user".

В качестве языка выбираем "ru" (НЕ ru_KOI8-R и НЕ ru_UTF-8).

Далее открываем блок настроек "Видимость". Здесь вы можете указать, на каких страницах разрешено использование визуального редактора. По умолчанию это страницы

node/*
user/*
comment/*

т.е. визуальный редактор будет использован на страницах редактирования контента, страницах профиля пользователя и страницах комментариев. По желанию, вы можете указать маску для других страниц.

Далее открываем блок "Кнопки и плагины". Здесь вы можете указать, какие именно кнопки будут доступны в панели инструментов визуального редактора.

После этого в блоке "Внешний вид редактора" вы можете указать расположение панели инструментов, ее выравнивание, расположение строки статуса редактора а также указать, разрешено ли изменение размеров блока редактора. Также доступна опция конфигурации "Форматы блоков" которая позволяет задать теги, которые будут доступны в визуальном редакторе в качестве опций форматирования текста.

Далее в блоке "Очистка и вывод" нужно выполнить следующие действия:

Для параметра "Проверка HTML" указываем значение false, т.к. в большинстве случаев задачу фильтрации HTML решает модуль фильтров Drupal. Для параметра "Предварительно отформатированно" указываем значение false, иначе сохраненный текст будет некорректно обрабатываться фильтрами Drupal.

Для опции "Remove linebreaks" (Удалить переводы строки) лучше поставить значение true чтобы избежать конфликтов с фильтрами вывода.

В разделе CSS вы можете указать настройки CSS для визуального редактора, в частности задать, какой CSS файл использовать для области редактирования (можно использовать стандартный файл текущей темы оформления Drupal, встроенный в TinyMCE файл стилей или указать собственный). Кроме того, параметр "Классы CSS" позволяет указать собственные стили для оформления текста, которые будут доступны в качестве опций для поля "--Стили--" в панели инструментов TinyMCE.

Нажимаем кнопку "Создать профиль".

Если все настройки были выполнены правильно, то перейдя на страницу создания материалов (например, страниц), мы увидим визуальный редактор или ссылку которая позволяет включить его отображение.