CKEditor API

30/04/2020, by maria

CKEditor APIはDrupal 8で新しくなりました。

これはDrupal 8のCKEditorモジュールのAPIにのみ適用され、CKEditor JavaScriptライブラリのAPIには適用されないことに注意してください。後者については、http://docs.ckeditor.com/を参照してください。

このモジュールの機能の詳細については、テキストエディターモジュールのドキュメントを参照してください。

APIの機能

最もまれに使用されるAPIの順に並べられています：

CKEditorスキン

Drupal 8のCKEditorはデフォルトで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

たとえば、/node/add/articleのCKEditor iframeインスタンス（つまり、インプレース編集に使用されていないCKEditorインスタンス）に読み込まれるCSSは、CKEditor iframeインスタンスがフロントエンドのスタイルに一致するように（WYSIWYGを好む人向け）、または構造を表示するように（純粋にアシストするテキストエディターを好む人向け）調整する必要がある場合があります。
- フロントエンドテーマCSS
ほぼすべてのフロントエンドテーマには、段落、引用、画像キャプションなどのスタイルを設定するCSSがあります。したがって、すべてのフロントエンドテーマは、コンテンツ作成者が作成できる任意のコンテンツ（テキスト/マークアップ）に対して、CKEditor iframeインスタンスにCSSを読み込ませる必要があります。これを行うには、*.info.ymlファイルでckeditor_stylesheetsキーを指定します。そこにリストされているCSSアセットもiframeに読み込まれます。Bartikの例を参照してください。CKEditorをフロントエンドテーマに一致させる方法（「WYSIWYGは嘘です」）のガイドもご覧ください！
- モジュールCSS
フロントエンドでCSSを読み込むモジュールは、hook_ckeditor_css_alter()を使用して、そのCSSをCKEditor iframeインスタンスにも読み込むことができます。

CKEditorプラグイン

CKEditorにさらに多くの機能を追加しましょう！

\Drupal\ckeditor\CKEditorPluginInterface：CKEditorプラグインに1：1で対応するDrupalプラグインで、Drupalが利用可能なCKEditorプラグインを認識できるようにします。これが、一見すると紛らわしい名前の由来です：CKEditor Pluginプラグイン。しかし、これは実際には理にかなっています！

実装できる追加のインターフェースが4つあります

1. \Drupal\ckeditor\CKEditorPluginButtonsInterfaceを使用すると、CKEditorプラグインが提供するボタンを定義できるため、ユーザーはドラッグアンドドロップベースのインターフェースでCKEditorツールバーインスタンスを設定できます。
例：\Drupal\ckeditor\Plugin\CKEditorPlugin\StylesComboは、CKEditorツールバーボタン（ドロップダウンでさえ）を提供します。
2. \Drupal\ckeditor\CKEditorPluginContextualInterfaceを使用すると、CKEditorプラグインをコンテキストに応じて自動的に有効にできます：別のCKEditorプラグインのボタンが有効な場合、フィルターが有効な場合、CKEditorプラグインの設定が特定の値を持つ場合、または上記のすべての組み合わせの場合。
例：\Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaptionは、Imageボタンが存在し、alignまたはcaptionフィルターが有効な場合に自動的に有効になります。
3. \Drupal\ckeditor\CKEditorPluginConfigurableInterfaceを使用すると、CKEditorプラグインが、そのプラグインが持つ可能性のあるすべてのオプションを設定するためのオプションフォームを定義できます。
例：\Drupal\ckeditor\Plugin\CKEditorPlugin\StylesComboプラグインを使用すると、適用できるスタイルを設定できます。
4. 8.1.0以降の\Drupal\ckeditor\CKEditorPluginCssInterfaceを使用すると、CKEditorプラグインがCKEditor iframeインスタンスに読み込む追加のCSSを定義できます。
例：\Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaptionプラグインは追加のCSSを読み込みます。

プラグインの実装は、検出可能にするために@CKEditorPluginアノテーションでアノテーションを付ける必要があります。

これにはckeditorプラグインIDが含まれます。アノテーションで定義されたIDは、プラグインを追加する行のプラグインの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を参照してください。このファイルのドキュメントでは、Drupal 8の組み込みCKEditorビルド（本番用に最適化）を開発用に最適化されたビルド（つまり、未梱包）に置き換える方法も説明しています。

パレット - カラフルに🎨

Menu

APIの機能

デバッグ

関連情報

Let’s talk