CKEditor API

CKEditor API является новым в Drupal 8.

Обратите внимание, что это распространяется только на API модуля CKEditor Drupal 8, а не на API библиотеки CKEditor JavaScript - для этого см. http://docs.ckeditor.com/.

Для получения более подробной информации о том, что делает этот модуль, см. документацию модуля Text Editor.

Особенности API

Упорядочено по наиболее редко используемым API:

CKEditor skins

CKEditor Drupal 8 по умолчанию использует скин Moono. Это хорошо для большинства сайтов, так как это довольно нейтральный скин. Однако некоторые сайты хотят иметь идеальную интеграцию, и в этом случае вы можете установить другой скин - возможно, даже тот, который вы создадите сами.
Для этого реализуем hook_editor_js_settings_alter():

function hook_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'SKIN_NAME,ABSOLUTE_URL_TO_SKIN';
    }
  }
}

CKEditor iframe CSS

CSS, который загружается в экземпляр iframe CKEditor, например, в /node/add/article (то есть экземпляр CKEditor, который не используется для редактирования на месте), может потребоваться настроить так, чтобы экземпляры iframe CKEditor соответствовали стилю на front-end (для тех, кто предпочитает WYSIWYG) или чтобы он показывал структуру (для тех, кто предпочитает чисто вспомогательные текстовые редакторы).
- Front-end тема CSS
Практически каждая внешняя тема имеет CSS для стилизации абзацев, цитат, подписей к изображениям и так далее. Поэтому все внешние темы должны указывать экземплярам iframe CKEditor загружать CSS для любого контента (текст/разметка), который могут создавать создатели контента. Они могут сделать это, указав ключ ckeditor_stylesheets в своем файле *.info.yml. Перечисленные там CSS-ресурсы также будут загружены в iframe. Смотрите пример в Бартике. Также ознакомьтесь с руководством Как заставить CKEditor соответствовать вашей внешней теме ("WYSIWYG - это ложь")!
- Модуль CSS
Модули, загружающие CSS во внешнем интерфейсе, могут использовать hook_ckeditor_css_alter(), чтобы также загрузить этот CSS в экземпляры iframe CKEditor.

Плагины CKEditor

Добавьте больше функциональности в CKEditor!

\Drupal\ckeditor\CKEditorPluginInterface: плагины Drupal, которые соответствуют плагинам CKEditor 1: 1, чтобы Drupal знал о доступных плагинах CKEditor. Отсюда - на первый взгляд - запутанное название: плагины CKEditor Plugin, но это действительно имеет смысл!

Есть четыре дополнительных, дополнительных интерфейса, которые вы можете реализовать

1. \Drupal\ckeditor\CKEditorPluginButtonsInterface позволяет плагину CKEditor определять, какие кнопки он предоставляет, чтобы пользователи могли настраивать экземпляр панели инструментов CKEditor через интерфейс на основе перетаскивания.
Пример: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo предоставляет кнопку панели инструментов CKEditor (даже выпадающий список).
2. \Drupal\ckeditor\CKEditorPluginContextualInterface позволяет плагину CKEditor автоматически включаться в зависимости от контекста: если кнопка какого-либо другого плагина CKEditor включена, если какой-то фильтр включен, если настройка какого-либо плагина CKEditor имеет определенное значение, или комбинацию всех вышеупомянутое.
Пример: \ Drupal \ ckeditor \ Plugin \ CKEditorPlugin \ DrupalImageCaption включается сам, если присутствует кнопка Изображение и включен фильтр выравнивания или заголовка.
3. \Drupal\ckeditor\CKEditorPluginConfigurableInterface позволяет плагину CKEditor определять форму параметров для настройки любых параметров, которые может иметь этот плагин CKEditor.
Пример: плагин \ Drupal \ ckeditor \ Plugin \ CKEditorPlugin \ StylesCombo позволяет настраивать стили, которые можно применять.
4. \Drupal\ckeditor\CKEditorPluginCssInterfacesince 8.1.0 позволяет плагину CKEditor определять дополнительный CSS для загрузки в экземплярах iframe CKEditor.
Пример: плагин \ Drupal \ ckeditor \ Plugin \ CKEditorPlugin \ DrupalImageCaption загружает дополнительный CSS.

Реализации плагинов должны быть аннотированы аннотацией @CKEditorPlugin, чтобы их можно было обнаружить.

Это включает в себя идентификатор плагина ckeditor; Идентификатор, определенный в аннотации, должен совпадать с именем плагина, как определено в javascript плагина в строке, которая добавляет плагин.

// The annotation in of the plugin in the php must match what is defined here.
CKEDITOR.plugins.add('pluginId', { ... });

Метаданные аннотации обнаруженных плагинов можно изменить с помощью hook_ckeditor_plugin_info_alter().
\Drupal\ckeditor\CKEditorPluginBase предоставляет реализацию по умолчанию, поэтому плагинам CKEditor не нужно реализовывать каждый метод. Это означает, что он должен оптимизироваться для наиболее распространенного случая: он полезен только для плагинов, которые предоставляют кнопки.

И последнее, но не менее важное: при реализации нового плагина текстового редактора вы, вероятно, также захотите убедиться, что UX для его настройки отлично работает. Для этого смотрите ckeditor.drupalimage.admin.js и ckeditor.stylescombo.admin.js для примеров. Обратите внимание, что этот аспект (и только этот аспект!) Может быть изменен в https://www.drupal.org/node/2567801.

Отладка

Drupal 8 включает настраиваемую оптимизированную сборку CKEditor. См. core/assets/vendor/ckeditor/build-config.js. Документация в этом файле также объясняет, как заменить встроенную сборку CKEditor в Drupal 8 (оптимизированную для производства) сборкой, оптимизированной для разработки (т.е. неукомплектованной).

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Особенности API

Отладка

Смотрите также