Иногда программисты сталкиваются с необходимостью создать инстанцию 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();