CKEditor в Drupal. Как установить и настроить.

Обычно установка текстового редактора в Drupal проходит в два этапа. Сначала ставим модуль wysiwyg и только после этого редактор. Если у вас нет предпочтений в выборе редактора и вы, так же как я, не любите лишние движения, то предлагают попробовать CKEditor.

1. Настраиваем CKEditor
2. Загрузка изображений
3. Дополнительные фильтры
4. Подсветка синтаксиса

Этот редактор устанавливается как модуль вот ссылка на страницу https://www.drupal.org/project/ckeditor. Переходим, скачиваем, ставим как обычный модуль или делаем ещё проще drush dl ckeditor drush en ckeditor Две команды drush = минута времени и можно приступать к настройке.

Настройка CKEditor

Переходим в меню Конфигурация → Работа с содержимым → CKEditor. Сначала посмотрим что нам предлагают глобальные настройки. Пропускаем выбор шкурок и переходим к самому интересному - Расширенным настройкам.

Первым и единственным обязательным пунктом является Path to CKEditor - путь до CKEditor. Здесь может быть любой внешний URL. По умолчанию стоит cdn - оптимальный вариант если только у вас нет причин использовать свой вариант.

Local path to CKEditor - путь до CKEditor на вашем сервере. Указываем или абсолютный путь или относительно файла index.php

Далее также определяется место расположения плагинов и файл менеджера CKFinder. В описании каждого пункта настройки есть список "заменителей" и адрес соответствующий текущим настройкам.

Также в глобальных настройках можно включить агрегацию(не рекомендуется) и включить/выключить drag-and-drop при настройке интерфейса. Отключение drag-and-drop не такая уж и бесполезная функция, как может показаться. Пример из личного опыта. Во время настройки редактора я перестарался с подключением/отключением плагинов. В какой-то момент у меня перестала отображаться кнопка для вставки кода. Отключив перетаскивательный интерфейс я прописал название кнопки в ручную и кнопка появилась. Главное знать как называются кнопки.

Переходим к настройкам профилей. Доступны они стой же страницы Конфигурация → Работа с содержимым → CKEditor.

В базовых настройках отмечаем для каких режимов форматирования доступен этот профиль. В разделе безопасности перечислены какие фильтры применены. О фильтрах расскажу позже.

Editor appearance - внешний вид редактора. Прежде всего выбираем кнопки. Если в глобальных настройках включён drag-and-drop то кнопки можно перетаскивать мышкой. С помощью вертикальных и горизонтальных линий группировать кнопки. Также в этом блоке настроек можно разрешить включать/отключать редактор(Show the disable/enable rich text editor toggle) и скрывать кнопки делая их видимыми по клику(Toolbar state on startup). Далее идёт выбор цветовой схемы. Можно выбрать одну из представленных или настроить свою.

За счёт списка плагинов можно прокачать редактор добавив дополнительные возможности. Некоторые плагины достаточно подключить(счётчик знаков и слов) и они будут работать. Для некоторых нужно добавить кнопку, как на пример для плагина вставки картинок через IMCE. Я бы не рекомендовал использовать этот плагин о причинах читайте в следующем разделе про добавление картинок. Для некоторых нужно ещё настроить фильтры как например для плагина вставляющего код. Если чего-то не работает не спешите всё валить на плагин. Последними в данном блоке идут языковые настройки.

Следующий блок настроек Advanced content filter. Здесь включаются фильтры и задаются параметры фильтрации для вводимого содержимого. Я предпочитаю настраивать фильтры в режимах форматирования.

Блок настроек Cleanup and output определяет ввод и вывод содержимого. По умолчанию настройки установлены так что при нажатии на Enter будет создаваться новый абзац а при Enter + Shift перенос строки в текущем абзаце. Плюс к этому можете настроить опции форматирования HTML кода. Внешне ваше содержимое от этого не измениться. В блоке настроек CSS определяется внешний вид редактора. Выбираете один из вариантов или указываете путь до css файла.

File browser settings - выбираем файл менеджер для вставки картинок. Я пользуюсь IMCE. Если вам по душе CKFinder то здесь же можно указать папку для закачиваемых файлов.
В дополнительных настройках можно разрешить CKEditor заменять вставляемый HTML как простой текст и включить проверку орфографии.

Загрузка изображений в CKEditor - IMSE vs CKFinder

За загрузку картинок у меня отвечает IMCE. Я не стал заморачиваться с CKFinder потому что он платный. Да у него есть демоверсия. Не знаю ограничена она только по функционалу или ещё и по времени. Самый главный минус - чтобы всё заработало нужно лезть в конфигурационные файлы. С IMCE таких проблем нет. Ставим модуль, выбираем IMCE как файл-менеджер в настройках CKEditor и можем работать.

Перейдём в меню Конфигурация→ Мультимедиа → IMCE.

Первым идёт список профилей. IMCE может наделять пользователя большими правами по управлению файлами. Чтобы левые люди не воспользовались ими, в IMCE предусмотрены профили. К ним мы вернёмся позже. Дальше идёт список ролей пользователей и соответствующие им профили. Не достаточно в настройках CKEditor указать IMCE как файл-менеджер и добавить кнопку. Здесь нужно явно задать какой роли какой профиль соответствует. Последними идут общие настройки. С них и начнём.

Первое что нам предлагают это подключить IMCE к полям не имеющим редактора. Нужно вписать через запятую ID таких полей, после чего под полем появиться ссылка по клику на которую можно будет закачать картинку. Далее идёт включение абсолютных URL для файлов. Ещё один интересный пункт - как поступать с файлами с одинаковым названием. По умолчанию новый файл будет переименовываться.

В следующем пункте выбираем каким образом будут создаваться превьюшки. Они могут быть или отмасштабированы или отмасштабированы с последующей обрезкой. Во втором случае превьюшка всегда будет заданного размера.

С основными настройками разобрались переходим к настройкам профилей. С начала идёт стандартное поле с названием профиля. Далее ограничения по размеру, весу и формату загружаемых файлов. Обратите внимание что есть квота на папку и квота на пользователя. Дело в том что свои файлы пользователь может загружать в разные папки. Для этого в таблице Directories нужно задать доступные адреса. Там же можно выбрать доступные действия.

В поле адрес папки можно вписать PHP код для создания адресов. IMCE будет сам создавать папки для пользователей. Инструкция как это сделать есть под таблицей.  Такой подход к созданию папок удобен тем, что файлы пользователей лежат по отдельным папкам а не в общей куче. Очень удобно если на сайте много пользователей с правом на добавление контента. Можно пойти дальше и не ограничиваться просто созданием директории с именем пользователя а добавить в неё вложенные директории с датой. В поле адрес папки вписать php: return $user->name.'/'.date('m-Y'); В итоге в адресе кроме имени пользователя будет текущий месяц и год. Каждый месяц будет создаваться новая папка. Для чего это нужно? Помните в настройках квот можно указывать максимальный объём для папки и для пользователя в целом. Ограничив пользователя рано или поздно вы столкнетесь с проблемой что пользователь исчерпает свой лимит и тут нужно либо удалять файлы либо увеличивать квоту. Мы сделаем лучше. Ограничим объём загружаемых файлов для папки, а общую квоту сделать безлимитной. Получается что у нас есть месячная квота на объём загружаемых файлов при этом безлимит на весь аккаунт.

IMCE кроме закачки/вставки картинок может изменять их размеры. Ресайз картинок создаст дополнительную нагрузку на сервер поэтому давать пользователям разрешение на ресайз не лучшая идея. Тем более не стоит разрешать ресайз если на Drupal сайте настроены адаптивные изображения. Это делает ресайз бессмысленным.

Последним пунктом идёт настройка превьюшек. Каким образом они будут уменьшаться определяется в общих настройках, а здесь просто указывается имя, размер и префикс.
Чтобы вставить изображение нужно в редакторе нажать на кнопку, затем в открывшемся окне нажать "выбрать файл на сервере" после этого вам откроется окно с IMCE. В CKEditor есть плагин позволяющий пропустить этот шаг. Подключаете в настройках редактора плагин и добавляете кнопку IMCE. Теперь файл менеджер доступен сразу по клику на кнопке. Это немного упрощает добавление изображений. Но если вы на своём сайте настроили адаптивные изображения так делать не рекомендуется. Изображения вставленные напрямую через IMCE вставляются через тег <img>, а не через <picture>. Я не советую использовать этот плагин.

Фильтры в CKEditor

Что такое фильтры, зачем они нужны и как их настраивать описано в статье про TinyMCE. Кроме дефолтных фильтров можно поставить дополнительные, например HTML Purifier. Как видно из описания этот фильтр удаляет вредоносный код и делает HTML мягким и шелковистым. Для работы модуля нужна библиотека HTML Purifier. Распаковывать библиотеку можно как в папку sites/all/libraries так и в папку с модулем. Все подробности на странице с модулем или в ридмике.

После подключения модуля в настройках текстового формата появятся два новых фильтра. Для некоторых настроек достаточно выбрать да/нет а для некоторых нужно прописывать условия вручную. Узнать как правильно записать условие можно кликнув по названию настройки. HTML Purifier отличается от стандартных фильтров Drupal. Например разрешив тег <img> вы не сможете вставить картинку. Оказывается что кроме тега нужно ещё разрешить его атрибут src. В настройках HTML в поле Allowed записать img[src|alt|title] Теперь можете смело добавлять картинки с альтами и тайтлами. По умолчанию HTML Purifier пропускает некоторые теги но, как только вы добавили хотя бы одно правило, установки по умолчанию отключаются.

HTML Purifier после подключения добавляет два фильтра. Для тонкой настройки лучше выбрать расширенную (advanced) версию, для быстрой и простой настрой настройки - обычную. Не нужно включать одновременно две версии.

Как я уже говорил HTML Purifier проверяет HTML на валидность и в случае не соответствия стандартам исправляет. Вроде бы полезная функция но вот картинки вставленные через <picture> он не пропустит.

Как вывести кода красиво. Подсветка синтаксиса.

Судя по данным wordstat, далеко не у всех возникает необходимость подсвечивать синтаксис. Кому-то это не нужно, а кому-то достаточно стандартного <code>. Думаю среди читателей Webonlife процент тех кому интересно узнать как подсветить синтаксис, выше чем в среднем по интернету.

Для подсветки синтаксиса я пользуюсь GeSHi filter. Кроме модуля нам потребуется библиотека GeSHi. Модуль ставим как обычно, библиотека должна находиться в папке sites/all/libraries/

В настройках типа контента включаем фильтр GeSHi. Переходим в меню Конфигурация → Работа с содержимым → Форматы текста → GeSHi фильтр. На вкладке основные настройки видим какую версию библиотеки нашёл модуль, теги для подсветки, поведение по умолчанию. Обычно я ставлю нормальную нумерацию строк, отключаю ссылки для ключевых слов. В настройках CSS выбираю второй пункт - Использовать CSS классы и автоматически управлять внешними файлами стилей.
Теперь вкладка языки. Самое интересное здесь поле Tag/language attribute value. В этом поле указывается на что будет реагировать GeSHi filter при выборе подсветки. По умолчанию создаётся тег с названием языка программирования. Так например участок JavaScript кода должен находиться между тегами <javascript> и </javascript>. Не очень удобно каждый раз отключать редактор и прописывать теги. Не плохо бы иметь в редакторе кнопку которая сделает всё за нас. В CKEditor такая кнопка есть. Что бы эта кнопка появилась нужно подключить плагин codesnippet. Вставлять код теперь проще. Жмёте кнопку, вставляете код, выбираете язык на котором код написан. На этом настройка не заканчивается. Дело в том что плагин для разметки кода использует классы. Нужно эти классы прописать в настройках GeSHi в поле Tag/language attribute value

Последняя проблема - спецсимволы. Редактор записывает их не так как нам хотелось бы. Например "<" будет записано как &lt;. Исправляется редактированием файла geshi.php из библиотеки. Ищем строки // Replace all newlines to a common form $code = str_replace("\r\n", "\n", $this->source); после них вставляем код

$code = str_replace(array('&gt;','&lt;','&lsaquo;','&rsaquo;','&#39;','&quot;','&amp;'), array('>', '<', '‹', '›', "'", '"', '&'), $code);

 Теперь всё должно работать как надо.

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