CKEditor5 Template
事前定義されたHTMLコンテンツテンプレートを便利なツールバードロップダウンからリッチテキストエディタに挿入できるDrupal用CKEditor 5プラグイン。
ckeditor5_template
インストール
composer require 'drupal/ckeditor5_template:^1.0'
概要
CKEditor5 Templateは、CKEditor 5にテンプレート挿入機能を統合するDrupalのContribモジュールです。CKEditor 4のみをサポートしていた旧ckeditor_templateモジュールの後継です。このモジュールにより、コンテンツ編集者はよく使用するテキストブロック、テーブル、フォーマット済みコンテンツ構造などの事前定義されたHTMLスニペットをエディタのツールバーから直接挿入できます。
このモジュールはCKEditor 5のツールバーにカスタマイズ可能な「Template」ボタンを追加します。クリックすると、外部JSONファイルで定義されたテンプレートが表示されるドロップダウンメニューが開きます。各テンプレートには独自のアイコン、タイトル、説明（ツールチップとして表示）、HTMLコンテンツを設定できます。コンテンツ編集者はテンプレートをクリックするだけで、エディタの現在のカーソル位置に挿入できます。
サイト管理者はテキストフォーマットごとに使用するJSONテンプレートファイルを設定でき、異なるコンテンツタイプやユーザーロールに対して異なるテンプレートセットを用意できます。ツールバーボタンの外観もカスタマイズ可能で、アイコンの横にテキストラベルを表示するかどうかも設定できます。
Features
- CKEditor 5にドロップダウンメニュー付きのTemplateツールバーボタンを追加
- JSONファイルで定義された無制限のカスタムHTMLテンプレートをサポート
- 各テンプレートにカスタムSVGアイコン、タイトル、説明ツールチップ、HTMLコンテンツを設定可能
- テキストフォーマットごとに設定可能で、用途に応じて異なるテンプレートセットを使用可能
- テンプレートは外部JSONファイルから動的に読み込み
- ツールバーボタンにアイコンと共にオプションのテキストラベルを表示可能
- すぐに始められるサンプルテンプレートJSONファイルを同梱
- 多数のテンプレートが定義されている場合、ドロップダウンメニューはスクロールに対応
- Drupal 10.3以降およびDrupal 11に対応
Use Cases
マーケティングチーム向けの標準化されたコンテンツブロック
マーケティングチームは、標準化されたプロモーションコンテンツ、コールトゥアクションブロック、ブランドコンテンツセクションを挿入する必要がよくあります。ニュースレター登録ボックス、製品ハイライトブロック、プロモーションバナーなどの一般的なマーケティング要素のテンプレートを作成できます。これにより、コンテンツ作成者の時間を節約しながら、すべてのコンテンツでブランドの一貫性を確保できます。
法務・コンプライアンステキストの挿入
標準的な法的文章、免責事項、著作権表示、コンプライアンス声明を含める必要がある組織は、これらの繰り返し使用するテキストブロックのテンプレートを作成できます。これにより、毎回正確に承認された文言が使用され、エラーや記載漏れのリスクが軽減されます。
技術ドキュメントの定型文
技術ドキュメントを持つサイトでは、説明テキスト付きのコード例、警告/注記/ヒントのコールアウトボックス、ステップバイステップの手順形式、APIドキュメントパターンなどの一般的な構造のテンプレートを作成できます。これにより、サイト全体で一貫したドキュメントスタイルを維持できます。
プレスリリースとニュース記事のフォーマット
ニュースやメディアサイトでは、標準的なプレスリリースフォーマット、インタビュー引用ブロック、画像帰属パターン、記事セクションヘッダーのテンプレートを提供できます。これにより、コンテンツ作成を迅速化しながらジャーナリズムのスタイル基準を維持できます。
メールニュースレターコンテンツブロック
メールニュースレターで使用されるコンテンツを作成する場合、テンプレートでメールクライアントで正しくレンダリングされることが確認されている事前フォーマット済みセクションを提供できます。テーブルベースのレイアウト、スタイル付きヘッダー、コールトゥアクションボタンなどが含まれます。
一貫した構造を持つ多言語コンテンツ
多言語サイトでは、テンプレートにより翻訳されたコンテンツが言語間で同じ構造形式を維持できます。翻訳者はHTML構造を一貫させたまま、テキストコンテンツに集中できます。
Tips
- モジュール更新時に変更が失われないよう、テンプレートJSONファイルはckeditor5_templateモジュールフォルダではなく、テーマまたはカスタムモジュールディレクトリに作成してください
- テンプレートタイトルはドロップダウンメニューに表示され、コンテンツ編集者がすぐに認識できる必要があるため、意味のある説明的なタイトルを使用してください
- ドロップダウンメニューでテンプレートを視覚的に区別しやすくするため、カスタムSVGアイコンを含めてください
- テンプレートHTMLはシンプルでセマンティックに保ち、複雑なスタイリングはテンプレート内のインラインスタイルではなく、テーマのCSSで処理してください
- HTML出力が予期せず削除または変更されないよう、有効なすべてのテキストフィルターでテンプレートをテストしてください
- テンプレートが多いサイトでは、ドロップダウンに順番に表示されるため、JSONファイル内で論理的に整理してください
- テキストフォーマットごとに異なるテンプレートファイルの作成を検討してください（例：基本的なテキストフォーマット用のシンプルなテンプレート、フルHTMLフォーマット用のより複雑なテンプレート）
- 多数のテンプレートがある場合、ドロップダウンメニューは自動的にスクロールし、ビューポートの高さの50%に制限されます
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
Templateプラグインの設定は、各テキストフォーマットのCKEditor 5ツールバー設定内に組み込まれています。Templateボタンをアクティブなツールバーに追加した後、歯車アイコンをクリックすると、テンプレートファイルの場所とツールバーボタンの外観に関する設定オプションが表示されます。
Troubleshooting 5
テンプレートファイルのパスがDrupalルートディレクトリからの相対パスであり、スラッシュで始まっていることを確認してください（例：/sites/default/files/templates/my-templates.json）。その場所にファイルが存在し、適切な読み取り権限があることを確認してください。
JSONファイルが有効なJSON形式であることを確認してください。JSONバリデーターを使用して構文を検証してください。各テンプレートに少なくとも「title」と「html」プロパティがあることを確認してください。テンプレートファイルの読み込みに問題があることを示すJavaScriptエラーがブラウザコンソールにないか確認してください。
これは通常、テンプレートJSONファイルを取得できないことを示しています。ブラウザの開発者ツールのNetworkタブで、JSONファイルのリクエストが失敗していないか確認してください。一般的な原因は、ファイルパスの誤り、ファイルの欠落、サーバーの権限問題です。
テキストフォーマットのフィルターがHTMLを変更している可能性があります。有効なフィルター（例：「許可するHTMLタグを制限」）を確認し、テンプレートで使用されているHTML要素が許可されていることを確認してください。フィルター設定に許可するタグを追加する必要があるかもしれません。
アイコンの値が「<svg」で始まる有効なSVGコンテンツであることを確認してください。SVGマークアップ全体がJSON内の文字列として含まれている必要があります。無効なSVGの場合、モジュールはデフォルトのテンプレートアイコンにフォールバックします。
Security Notes 4
- テンプレートHTMLコンテンツはプラグインレベルでのサニタイズなしに直接エディタに挿入されます。コンテンツ表示時に出力をサニタイズするため、テキストフォーマットで適切なフィルターが有効になっていることを確認してください
- テンプレートJSONファイルにはスクリプトを含む任意のHTMLを含めることができるため、信頼できる管理者のみがテンプレートJSONファイルを変更できるようにしてください
- テンプレートファイルはブラウザからのHTTPリクエストでアクセス可能である必要があります。機密情報を含むテンプレートファイルを公開アクセス可能な場所に保存しないでください
- テンプレート変更のバージョン管理と監査証跡が必要な場合は、Drupalの設定システムまたはカスタムモジュールを使用してテンプレートを管理することを検討してください