Приручаем CKEditor

CKEditor является одним из наиболее удобных текстовых редакторов с возможностями вставки HTML. Позволяет он и расширять свои возможности при помощи плагинов. Основной принцип работы этих расширений — реакция на события, вызываемые пользователем с помощью клика мышки или нажатия клавиш.

Очень часто приходится в набираемых текстах использовать символ " — ", тире. Честно говоря, не нашёл в CKEditor возможности вставить его через клавиатуру, готовой кнопки на тулбаре тоже не было. Переключать в режим чистого HTML и набирать вручную — во-первых муторно, во-вторых, в случае если давать такую возможность А красивой и правильной типографики хочется. Значит — сделаем сами.

Итак, требуется:

  • реализовать плагин для CKEditor, позволяющий вставлять тире;
  • подключить реализованный плагин.
Cайт у нас, конечно же, на Drupal 7, поэтому реализация и подключение будут делаться с учётом особенностей этой CMS.

Реализация

Код нашего плагина на JS:
 

CKEDITOR.plugins.add('mdash', {
        init: function(editor) {
// Put our plugin's logic here
});

Метод CKEDITOR.plugins.add() имеет два параметра:

  • имя плагина, по которому CKEdtor будет его искать;
  • объект, свойства которого и определяют поведение плагина.

В нашем случае свойство, а точнее, метод init() этого объекта, будучи вызван при инициализации плагина, содержит всю логику его работы.

Итак, что же представляет собой метод init() ?
 

init: function(editor) {
     // First, we define our custom command
     editor.addCommand('mdashCommand', {
         exec : function(editor, data) {
           editor.insertHtml( ' —  ' );
         }
     });

     // Then, we set up the key combination
    editor.setKeystroke(CKEDITOR.CTRL + CKEDITOR.ALT + 77, 'mdashCommand');
    editor.ui.addButton && editor.ui.addButton( 'mdash',
    {
         label : Drupal.t('Insert MDash'),
         icon : this.path + 'mdash.png',
         command: 'mdashCommand'
    });

}
Первое действие:
editor.addCommand('mdashCommand', {
                exec : function(editor, data) {
                    editor.insertHtml( ' — ' );
                }

это регистрация пользовательского события с именем mdashCommand. Пользовательские события могут быть вызваны непосредственно, а также их имена можно использовать в методах обработки действий пользователя, как-то: нажатий клавиш и кликов мышкой.
Метод exec() объекта-параметра — это обработчик события, а именно — вставляет в позицию курсора последовательность HTML-символов, наше тире, отбитое слева и справа узкими пробелами, причём левый — неразрывный. Таковы правила типографики.

Теперь нужно задать действия пользователя, которые будут вызывать наше событие.
Зададим реакцию на действие с клавиатуры

editor.setKeystroke(CKEDITOR.CTRL + CKEDITOR.ALT + 77, 'mdashCommand');

При нажатии Ctrl+Alt+m произойдет вставка символа тире.

Теперь на панели управления — тулбаре нарисуем кнопку, при клике мышкой на которую будет вставлено тире:
 

editor.ui.addButton && editor.ui.addButton( 'mdash',
{
    label : Drupal.t('Insert MDash'),
    icon : this.path + 'mdash.png',
    command: 'mdashCommand'
});

Первый параметр label — это текст, который будет появляться при наведении указателя мыши на кнопку. Его мы подвергнем локализации при помощи Drupal.t().
Icon — задает путь к картинке, которая будет нанесена на кнопку. Задается относительно файла, содержащего код плагина. Ну и command — имя нашего пользовательского события. Плагин готов. Теперь поместим его код в файл plugin.js и сохраним, ещё пригодится :)

Подключение

Часть работы по подключению готового плагина возьмет на себя Drupal, надо только рассказать ему о необходимости сделать это.

Для интеграции CKEditor на сайт надо, чтобы был установлен один из двух модулей: CKEditor или WYSIWYG. Последний умеет работать не только с CKEditor но и с другими редакторами, например, TinyMCE. Я буду рассказывать о конфигурации c WYSIWYG.

Теперь настало время рассказать Drupal о нашем плагине. В этом нам поможет хук, которым модуль WYSIWYG пользуется для сбора информации о плагинах тех редакторов, для работы с которыми он настроен. Хук реализуем в нашем пользовательском дополнительном модуле, пусть он будет называться site_helper:
 

/**
 * Implements hook_wysiwyg_plugin().
 */

function site_helper_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      if (version_compare($version, '4.0')) {
        return array(
          'mdash' => array(
            'path' => drupal_get_path('module', 'site_helper') . '/plugins/ckeditor',
            'buttons' => array(
              'mdash' => t('Insert MDash'),
            ),
            'load' => TRUE,
          ),
        );
      }
  }
}

Определив, с каким редактором и какой версией работать, хук вернет структурированный массив, первый ключ которого — имя плагина из CKEDITOR.plugins.add(), по которому CKEdtor будет его искать.

Ключи элементов:
path — путь к файлу plugin.js с кодом плагина. Если модуль находится в sites/all/modules, то наш файл plugin.js надо положить в sites/all/modules/plugins/ckeditor. Туда же положить иконку для кнопки на тулбаре;
buttons — массив чекбоксов,  которые появятся в форме настроек CKEditor и будут отвечать за активацию плагина. Каждый соответствует одной добавленной при помощи editor.ui.addButton() кнопке, ключ соответствует первому параметру в вызове функции добавления, то есть имени кнопки. А 'mdash' => t('Insert Mdash') — это название чекбокса.

Далее, когда модуль дописан, заходим сюда: admin/config/content/wysiwyg
Не забываем сбросить кеш:

Выбираем формат, где будем использовать нашу возможность вставки тире. WYSIWYG хранит настройки для каждого формата ввода отдельно, в том числе и какой редактор использовать. Нам нужен любой, где используется CKEditor:

В секции Вuttons And Plugins ищем наш чекбокс Insert MDash и включаем его. Сохраняем настройки. Плагин активирован.

Затем в любом текстовом поле, где будет доступен формат, для которого мы включили плагин, будет видна наша кнопка. Нажимаем ее — и видим аккуратное тире:

То же самое будет если нажать комбинацию Ctrl+Alt+m.