CKEditor - Ссылки на ноду

В данной статье я покажу как написать плагин для CKEditor 4 и один из вариантов, как организовать обмен информации между плагином и Друпалом. 

Итак, задача - позволить пользователю вставлять в текст ссылки на определенный тип материала, используя удобный интерфейс редактора.

Часть первая - Подготовка массива с данными (ссылки на материал).

Создадим небольшой модуль, который достает из БД инфоромацию о нодах, формирует массив и передает его в javascript. Так как редактор загружается только на форме, для нашей задачи используем хук hook_form_alter.

Ниже приведен код модуля node_list с комментариями.

function node_list_form_alter($form, $form_state){
//Выборка материалов типа news, отсортированных по заголовку
    $nodes = db_select('node', 'n')
    ->fields('n')
    ->condition('n.type', 'news')
    ->orderBy('n.title', 'ASC')
    ->execute(); 

//Сформируем массив вида
//[[Заголовок1,Ссылка1], [Заголовок2,Ссылка2], [Заголовок3,Ссылка3], ...]
foreach ($nodes as $node) {
​  $title=check_plain($node->title);
  $out[]=array($title,
      l($node->title,'node/'.$node->nid, array(
               'attributes'=>array('title'=>$title))
     ));
}

//Передадим созданный массив (в формате json) javascript на растерзание
drupal_add_js(array('node_list' => array('terror' =>json_encode($out))), 'setting');  
}

Часть вторая - Создание плагина для CKEditor 4

Для начала необходимо создать папку для файлов плагина. Например, frz. Это сокращение от ника Frantsuzzz, но, конечно, лучше создавать более информативное название, например - node_link или node_list. Тут решать Вам самим, а у меня сегодня будет frz.

Наш плагин будет иметь следующую структуру:

• frz
  • dialogs
  • images
  • plugin.js

Файл plugin.js - основной, будет иметь следующее сожержание:

CKEDITOR.plugins.add('frz',{
    init: function(editor){
        var cmd = editor.addCommand('frz', new CKEDITOR.dialogCommand('cuttable'));
     // плагин будет работать только в режиме wysiwyg
     cmd.modes = { wysiwyg : 1, source: 0 };
        
        editor.ui.addButton('frz',{
            label: 'Добавить ссылку на террориста',
            command: 'frz',
            icon : this.path + 'images/frz.png',
        });
        
     CKEDITOR.dialog.add('cuttable', this.path + 'dialogs/cuttable.js');
 }
});

В папку images кладем иконку frz.png. Это, собственно говоря, иконка для кнопки на панели редактора.

В папке dialogs будет лежать скрипт cuttable.js, который отвечает за работу диалогового окна.

Его содержимое: