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

mbaev 19.09.2018, 11:14

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

  1. /**
  2.  * Form builder for editor.
  3.  */
  4. function mymodule_editor_form($form, &$form_state) {
  5.   $form['editor'] = [
  6.     '#type' => 'text_format'
  7.   ];
  8.   return $form;
  9. }

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

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

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

Инициируем CKEditor

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

  1. /**
  2.  * Form builder for editor.
  3.  */
  4. function mymodule_editor_form($form, &$form_state) {
  5.   return ['editor' => ['#type' => 'text_format']];
  6. }
  7.  
  8. function mymodule_page_callback() {
  9.   $form = drupal_get_form('mymodule_editor_form');
  10.   // Сделаем вид, что мы собираемся показать форму с редактором.
  11.   drupal_render($form);
  12.  
  13.   //...
  14. }

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

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

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

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

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

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

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

  1. // Ваша инстанция CKEditor'a лежит здесь.
  2. var editor = CKEDITOR.instances['any-unique-id'];
  3.  
  4. // Получить текст из редактора
  5. editor.getData();
  6.  
  7. // Вписать/установить значение редакторв
  8. editor.setData('any text');
  9.  
  10. // Выполнить событие по любому изменению внутри редактора
  11. editor.on('change', function () {
  12.   console.log(editor.getData());
  13. });
  14.  
  15. // Разрушить и удалить CKEditor, вернув textarea назад.
  16. editor.destroy();