Добавляем настройки к js плагину CKEditor 5 в Drupal

Когда вы настраиваете форматы текстов, то кроме добавления иконок в toolbar wysiwyg, вы можете видеть набор настроек для разных плагинов CKEditor. Посмотрим как добавить настройки для своего плагина.

Сложно рассматривать эту задачу чисто теоретически, потому расскажу на примере плагина c5bb.

Плагин позволяет настраивать anchor ссылки, добавляя к ним класс .btn и ряд других классов, которые позволяют в конце концов настроить bootstrap-like button.

Помимо классов относящихся к фреймворку bootstrap, у ссылки есть и собственные естественные атрибуты типа href, target.

В определенный момент я понял, что было бы удобно иметь гибкую настройку bootstrap классов, что сводится к конфигурированию нескольких выпадающих списков.

На скриншоте это три выпадающих списка — Size (btn-sm, btn-lg), Style (btn-primary, btn-secondary) и Color (light, dark).

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

Создание плагина конфигурации

Плагин конфигурации — то есть описание элементов формы — задаётся как расширение класса CKEditor5PluginDefault. Его нужно разместить в /src/Plugin/CKEditor5Plugin/.

Для моего случая я написал C5BB класс (файл из модуля c5bb v 1.0.5) C5BB.php:

В buildConfigurationForm нужно, используя Form API, объявить требуемые поля. Текущие значения берутся из актуальной конфигурации — $this->configuration.

Как и для обычной формы, вы можете реализовать валидацию и отправку данных — через реализацию методов validateConfigurationForm и submitConfigurationForm интерфейса PluginFormInterface.

В моём случае это просто запись данных формы в конфигурацию:

Частью валидации также является функция getElementsSubset, которая должна передать набор описаний тегов, с которыми работает ваш плагин. Логика описания такая же как при задании секции elements файла *.ckeditor5.yml.

Конфигурация будет передана в ваш js плагин в том виде, как вы это сделаете в методе getDynamicPluginConfig. Обычно это просто передача массива конфигурации:

Создание схемы конфигурации

Кроме формы, вам нужно объявить схему данных вашей конфигурации, т.к. вообще она может не соответствовать структуре данных в вашей форме.

Задаётся она в виде описания схемы в /config/schema

Файл c5bb.schema.yml (c5bb модуль м 1.0.5):

У меня схема полностью соответствует форме — т.е. я описал те же два поля — текст и чекбокс.

Обратите внимание на то, как формируется название секции: c5bb_bbutton. Первая часть — название модуля, вторая — название js плагина.

Добавление ссылки на класс в *.ckeditor5.yml.

Созданный ранее класс C5BB нужно «зарегистрировать» в описателе ckeditor5 плагина. Он указывается как свойство «class» в секции drupal.

Файл c5bb.ckedtior5.yml (c5bb модуль м 1.0.5):

Получение данных конфигурации на стороне js плагина

После всех настроек, нужно как то получить передаваемые данные уже в экосистеме CKEditor5 API.

Они становятся частью общей конфигурации редактора, а так как ваш плагин расширяет класс Plugin, то внутри плагина получить настройки можно так:

Написать комментарий

Мало букафф? Читайте есчо !

Фильтруем нежелательные теги из WORD в CKEditor

Июль 1, 2018 г.

Хоть CKEditor и позволяет редактировать тексты, но редакторов сложно приучить готовить их сразу на сайте. Потому первая ревизия текста обычно появляется ...

Читать

Создание плагина CKEditor 5 в экосистеме Drupal 10

Февраль 8, 2024 г.

Drupal 10 добавил в ядро модуль wysiwyg CKEditor 5. Т.е. уже из "коробки" у вас есть редактор html кода. API CKEditor 4 и 5 версий значительно отличаются, ...

Читать

 

Комментарии к «Добавляем настройки к js плагину CKEditor 5 в Drupal»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: