Урок 4. Установка и настройка HTML-редакторов в Drupal

Создание сайта на Drupal 6. Практический вводный курс

Как можно было заметить на прошлом уроке, при создании статей не удобно размечать текст тегами HTML вручную, особенно если текст большой и содержит много структурных элементов. Куда удобней, когда можно просто нажимать на кнопки, после чего в текст добавляются соответствующая разметка и оформление так, как это бывает, например, в текстовых процессорах. Действительно, в Drupal можно подключать модули, которые позволяют использовать определенные HTML-редакторы, или сам модуль является реализацией редактора. В web широкое распространение нашли несколько редакторов: например, CKEditor, BUEditor, TinyMCE и др.

Текстовые редакторы делят на два класса — это плоские редакторы и так называемые WYSIWYG-редакторы ("что видишь, то и получишь"). В последних пользователь не вписывает и не видит теги (коды) разметки и оформления, он сразу видит конечный результат. То, каким образом достигается такое представление, скрыто от глаз пользователя.

Мы рассмотрим пару разных редакторов.

CKEditor

CKEditor представляет собой HTML-редактор типа WYSIWYG. Скачать его можно с сайта ckeditor.com (страница download, далее выбрать загрузку обычного CKEditor). Сделайте это, сохраните и распакуйте архив в любом месте (например, на рабочем столе).

CKEditor – это отдельный проект, не имеющий отношения к Drupal. Поэтому, чтобы подключить данный редактор к системе Drupal был разработан специальный модуль, который также называется CKEditor. Любые модули Drupal загружаются с сайта drupal.org. Чтобы быстро найти необходимый модуль, на главной странице этого сайта в форме вверху следует вписать его название и ниже выбрать вариант Modules, после чего нажать Search (поиск). Далее появится страница с ссылками подходящими под запрос поиска. Скорее всего, CKEditor будет первым. Перейдя на страницу модуля, вы можете загрузить подходящую версию (ссылки на архивы находятся в конце страницы, зеленым цветом помечены стабильные версии). Загрузите и распакуйте модуль. При распаковке будьте осторожны: не перепутайте модуль и сам редактор, т.к. их каталоги называются однаково.

Установим редактор в модуль:

  1. Откройте каталог, где находятся файлы модуля. Там есть одноименный каталог ckeditor. Зайдите в него, здесь вы должны увидеть текстовый файл COPY_HERE.txt.
  2. Переместите сюда каталог ckeditor с редактором.

Теперь необходимо переместить каталог-модуль ckeditor в файловую структуру системы Drupal (туда, где установлен сайт). Но куда именно? В каталоге WebServers/home/developer.home/www есть директория под названием modules. В ней находятся файлы всех модулей, изначально включенных в систему Drupal. Теоретически, если мы сюда поместим новый модуль, то система его увидит, и он будет работать. Однако так делать не следует. Все сторонние модули, загруженные пользователем, правильней помещать в каталог sites/all/modules. Папки modules в каталоге all в Drupal 6 по умолчанию нет, поэтому создайте ее и переместите сюда ранее сформированный каталог с модулем CKEditor.

Теперь в браузере перейдите на страницу модулей вашего сайта. Там должен появиться модуль CKEditor, включите его. После этого на главной странице управления сайтом в разделе Настройка сайта появится ссылка на страницу конфигурации редактора CKEditor. Данный редактор имеет множество настроек, которые мы не будем рассматривать. Как вы можете заметить, модули устанавливаются на английском языке; для их русификации следует посетить сайт drupaler.ru. Пока мы этого тоже делать не будем, т.к. далее не будем использовать CKEditor.

Создайте новый материал типа Запись в блог. Когда откроется страница добавления материала, вы увидите, что к полю редактирования текста прикреплена панель инструментов, подобно тому, что мы наблюдаем в любом текстовом процессоре. Попробуйте набрать произвольный текст и оформить его с помощью кнопок. Имейте ввиду, что здесь абзац формируется единичным нажатием Enter, а не двойным, как в "голом" Drupal. Если вам неудобно набирать текст в узком поле, то нажмите кнопку Максимизировать и редактор развернется на все окно. Если требуется посмотреть, какие теги HTML вставляет редактор, то следует нажать на кнопку Источник. Здесь можно редактировать материал вручную.

Назовите созданный вами материал Test1 и сохраните его.

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

BUEditor

BUEditor представляет собой более простой редактор, хотя назвать его "плоским" сложно. Теги вставляются с помощью кнопок, хотя пользователь видит именно теги разметки, а не результат их интерпретации. Поэтому BUEdior не является wysiwyg-редактором. Преимущество этого редактора заключается в том, что он легко настраивается под нужды пользователя.
Для того, чтобы установить в систему BUEditor достаточно загрузить с сайта drupal.org и распаковать в каталог sites/all/modules модуль bueditor. Далее его надо включить на странице модулей сайта (если эта страница уже была открыта, то перезагрузите ее).

Создайте публикацию Test2, исследуйте при этом возможности редактора. BUEditor не переопределяет установки Drupal: абзац формируется двойным нажатием Enter.

Теперь перейдем на страницу конфигурации редактора (Управление ? Настройка сайта ? BUEditor). Мы не будем русифицировать этот модуль, т.к. здесь не так уж много настроек и в большей степени они интуитивно понятны. Страница настроек BUEditor разделена на две части — Available editors (доступные редакторы) и Role-editor assignments (назначение редакторов ролям). В последних версиях BUEditor по умолчанию существует четыре разновидности редактора – BBCode, Commenter, Default и Lab. Версию Default мы уже видели, когда создавали материал Test2. Commenter представляет собой урезанную версию Default. BBCode использует специфичный язык разметки похожий на HTML; перед отображением страницы система Drupal преобразует теги BBCode в теги HTML. В Lab многие кнопки вызывают функции, осуществляющие те или иные действия (например, поиск, замену, отмену действия и т.д.).

В разделе Role-editor assignments мы видим три роли, которые существуют на данный момент в системе Drupal. Это user #1 (администратор системы), зарегистрированный и анонимный пользователи. Анонимный пользователь — это любой посетитель сайта, не зарегистрированный в системе. По умолчанию в Drupal анонимные пользователи не имеют даже прав оставлять комментарии. Зарегистрированный пользователь — это пользователь, представившийся системе, через форму Вход в систему (которую мы видели, когда выходили из своего аккаунта). Перед этим пользователь однажды должен был пройти процедуру регистрации самостоятельно или с помощью администратора системы. Как видно, зарегистрированному пользователю не назначен никакой редактор. Назначьте ему Commenter.

Поменяйте для user #1 редактор с Default на Lab. Откройте на редактирование ранее созданную статью (Test1 или Test2). Оцените возможности такого варианта редактора. После этого установите для администратора снова редактор Default.

Ранее было отмечено, что BUEditor легко настраивается под нужды пользователя. Давайте выясним, как это делается. Допустим, нам надо отредактировать вариант редактора Default. Для этого перейдем по ссылке Редактировать напротив его названия. Перед нами откроются настройки редактора Default. Наибольший интерес представляет раздел Buttons. Назначение столбцов понять не сложно. Создадим еще одну кнопку в этом редакторе, например, Table, генерирующую теги таблицы, с вложенными в нее тегами одной строки и двух ячеек. Внизу в строке подсвеченной красным цветом в столбце Заголовок пишем Table. В строке содержимого должен быть код HTML или вызов функции языка JavaScript.

Напишем для таблицы понятный нам код:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

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

Теперь осталось подготовить иконку (рисунок *.png обычно размером 20x20 пикселей) и положить ее в каталог /sites/all/modules/bueditor/icons/. После этого перезагрузите страницу настроек редактора Default и в выпадающем списке иконок выберите ваш рисунок, сохранив после этого изменения. Следует отметить, что кнопки можно перемещать относительно друг друга, настраивая тем самым их последовательность над формой ввода текста.

Удалите две созданные на этом уроке статьи, используя форму на странице Управление ? Управление содержимым ? Содержимое.