Работа с CKEditor в JavaScript, Drupal

Иногда программисты сталкиваются с необходимостью создать инстанцию CKEditor редактора на фронте. Например, если этот редактор должен появляться по нажатию на кнопку. Обычно это делается через получение формы с сервера:

<?php
/**
 * Form builder for editor.
 */
function mymodule_editor_form($form, &$form_state) {
  $form['editor'] = [
    '#type' => 'text_format'
  ];
  return $form;
}

Но в некоторых случаях программировать специальный ajax-запрос только ради того, чтобы получить заветный редактор бывает бессмысленно.

Ок, предположим у вас установлен и настроен модуль CKEditor, раз есть возможность создавать инстанции редактора используя рендеринг форм. Тогда мы должны сделать 2 шага:

Рассказать модулю CKEditor, что мы хотим использовать его на фронте
Использовать его!

Инициируем CKEditor

Да, без куска кода на сервере всё равно не обойтись. CKEditor не подключит необходимые js-скрипты и не передаст нужные параметры клиенту, если на сервере нет попыток отрендерить хотя бы один редактор. Поэтому будем симулировать. Главная задача дёрнуть функцию ckeditor_load_by_field(). Если у вас хватит знаний, можете использовать её напрямую. Иначе, есть лёгкий, неказистый способ спихнуть эту работу на Drupal.

<?php
/**
 * Form builder for editor.
 */
function mymodule_editor_form($form, &$form_state) {
  return ['editor' => ['#type' => 'text_format']];
}

function mymodule_page_callback() {
  $form = drupal_get_form('mymodule_editor_form');
  // Сделаем вид, что мы собираемся показать форму с редактором.
  drupal_render($form);

  //...
}

Здесь mymodule_page_callback - это функция-обработчик (page callback) вашей страницы.

Теперь CKEditor любезно подготовил для нас все необходимые скрипты и параметры на клиент-сайде. Для использования нам нужен любой textarea с уникальным id и щепотка js кода:

<textarea id="any-unique-id"></texarea>

Как известно в друпале есть текстовые форматы вроде Filtered HTML, Full HTML и т.п. Вам заранее нужно знать какой будете использовать. К примеру, filtered_html

Drupal.settings.ckeditor.elements['any-unique-id'] = 'filtered_html';
Drupal.ckeditorInit('any-unique-id');

Это всё. Не забывайте использовать Друпальные js-behavior'ы.

Полезные функции работы с CKEditor в Drupal

// Ваша инстанция CKEditor'a лежит здесь.
var editor = CKEDITOR.instances['any-unique-id'];

// Получить текст из редактора
editor.getData();

// Вписать/установить значение редакторов
editor.setData('any text');

// Выполнить событие по любому изменению внутри редактора
editor.on('change', function () {
  console.log(editor.getData());
});

// Разрушить и удалить CKEditor, вернув textarea назад.
editor.destroy();

Инициируем CKEditor

Полезные функции работы с CKEditor в Drupal

Другие посты