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

Иногда нужно создать инстанс CKEditor на фронте — например, по нажатию кнопки. Обычно это делается через форму с сервера, но не всегда есть смысл городить отдельный AJAX‑запрос только ради редактора.

Ниже — вариант для Drupal 7 с модулем CKEditor.

1. Инициируем CKEditor на сервере

CKEditor не подключит JS и не передаст нужные настройки, если на сервере ни разу не пытались отрендерить редактор. Поэтому симулируем форму с полем text_format и даём Drupal'у возможность прогнать соответствующие хуки.

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

  return $form;
}

function mymodule_page_callback() {
  $form = drupal_get_form('mymodule_editor_form');

  // Сделаем вид, что собираемся показать форму с редактором:
  drupal_render($form);

  // ...
}

mymodule_page_callback() — это page callback вашей страницы. Вызов drupal_render() заставляет модуль CKEditor подготовить все скрипты и настройки для клиента.

2. Создаём textarea и включаем CKEditor на фронте

На странице достаточно любой textarea с уникальным id:

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

Дальше важно знать, какой текстовый формат вы хотите использовать (например, filtered_html).

Простейшая инициализация:

// Где-то после того, как Drupal.settings уже заполнен CKEditor'ом.
Drupal.settings.ckeditor.elements['any-unique-id'] = 'filtered_html';
Drupal.ckeditorInit('any-unique-id');

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

Полезные функции CKEditor в Drupal

// Инстанс редактора:
var editor = CKEDITOR.instances['any-unique-id'];

// Получить текст:
editor.getData();

// Установить текст:
editor.setData('any text');

// Подписаться на изменения:
editor.on('change', function () {
  console.log(editor.getData());
});

// Разрушить редактор и вернуть textarea назад:
editor.destroy();