CKEditor Font Size and Family
CKEditor 5にフォントサイズ、フォントファミリー、フォントカラー、フォント背景色のドロップダウンボタンを追加します。
ckeditor_font
インストール
composer require 'drupal/ckeditor_font:8.x-1.5'
composer require 'drupal/ckeditor_font:8.x-1.3'
概要
CKEditor Font Size and Familyモジュールは、CKEditor 5 WYSIWYGエディタにフォントカスタマイズ機能を提供します。コンテンツ作成者がテキストにさまざまなフォントスタイル、サイズ、色を適用できる4つのツールバーボタンを提供します。
このモジュールは、CSSスタイルをインライン要素スタイルとして適用するフォントサイズとフォントファミリーのドロップダウンを追加します。デフォルトのコレクションには、人気のあるセリフフォント（Times New Roman、Georgia）、サンセリフフォント（Arial、Verdana、Tahoma）、等幅フォント（Courier New）が含まれています。テキストスタイリング用のフォントカラーとフォント背景色のカラーピッカーも利用可能です。
重要なお知らせ：このモジュールは非推奨です。新規サイトでは、CKSourceチームがメンテナンスしているCKEditor5 Plugin Packモジュールの使用を強く推奨します。このモジュールは、近い将来に他のモジュールへ移行する必要がある既存サイトでのみ使用してください。
Features
- カスタマイズ可能なサイズオプション付きのフォントサイズドロップダウン（px、em、rem、pt、%単位およびsmall、medium、largeなどのCSSキーワードをサポート）
- セリフ、サンセリフ、等幅フォントオプション付きのフォントファミリードロップダウン
- RGB、HSL、または16進数カラー値を使用してテキスト色を適用するフォントカラーピッカー
- 背景色でテキストをハイライトするフォント背景色ピッカー（CKEditor 5のみ）
- テキストフォーマットごとにカスタマイズ可能なフォントリスト
- すべてのフォントサイズ値をサポートするオプション（任意のフォントサイズのコンテンツを削除せずに貼り付け可能）
- すべてのフォントファミリー値をサポートするオプション（任意のフォントファミリーのコンテンツを削除せずに貼り付け可能）
- CKEditor 4からCKEditor 5設定への自動アップグレードパス
- カラーピッカーの列数とドキュメントカラー制限の設定
Use Cases
ブランド一貫性のためのカスタムフォントファミリーの追加
組織はエディタで特定のブランドフォントを設定し、コンテンツ作成者が承認されたタイポグラフィを使用することを保証できます。フォントファミリーフィールドに「Open Sans, sans-serif」や「Roboto, sans-serif」などのブランドフォントを設定して、ドロップダウンで利用可能にします。
アクセシビリティのためのフォントサイズオプションの制御
アクセシビリティガイドラインを満たす事前定義されたサイズセットに利用可能なフォントサイズを制限します。「16px|標準」「18px|大」「20px|特大」などのサイズを設定して、コンテンツが読みやすいサイズと一貫したスタイリングを維持するようにします。
教育コンテンツ用のテキストハイライトの有効化
フォント背景色機能を使用して、コンテンツ作成者が教育資料の重要なテキストをハイライトできるようにします。「#FFFF00|黄色ハイライト」や「#90EE90|緑色ハイライト」などのハイライト色を設定します。
CKEditor 4からCKEditor 5への移行
このモジュールは、CKEditor 4を使用したDrupal 9からCKEditor 5を使用したDrupal 10/11へ移行するサイトに自動アップグレードパスを提供します。FontおよびFontSizeボタンの設定は、自動的に新しいfontSizeおよびfontFamilyツールバーアイテムにマッピングされます。
貼り付けコンテンツの書式の保持
「すべてのフォントサイズ値をサポート」および「すべてのフォントファミリー値をサポート」オプションを有効にして、ユーザーがMicrosoft WordやGoogle Docsなどの外部ソースからコンテンツを貼り付ける際に書式を保持します。
Tips
- Webセーフフォントを使用するか、テーマ経由でカスタムフォントが読み込まれることを確認して、すべてのユーザーに正しく表示されることを保証してください
- 「列数」設定を使用して、カラーパレットを視覚的に魅力的なグリッドレイアウトで整理してください
- 「最大利用可能色数」を0に設定すると、ドキュメントカラー機能が無効になり、ユーザーを事前定義された色のみに制限できます
- CKEditor 5に移行する際は、移行前後のフォントレンダリングを比較して自動アップグレードをテストしてください
- 新規Drupalサイトでは、このモジュールは非推奨のため、代わりにCKEditor5 Plugin Packモジュールの使用を検討してください
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
特定のテキストフォーマットのCKEditorフォント設定を構成します。このページでは、エディタにフォントツールバーボタンを追加し、利用可能なフォントオプションをカスタマイズできます。
Hooks 1
hook_help
admin/help/ckeditor_fontでモジュールのヘルプページコンテンツを提供し、機能、設定、使用例を説明します。
Troubleshooting 5
テキストフォーマット設定で「利用可能なボタン」から「アクティブツールバー」にフォントボタンをドラッグしたことを確認してください。また、モジュールが有効になっており、テキストフォーマットがCKEditor 5を使用していることを確認してください。
フォントサイズ＆ファミリー設定で「すべてのフォントサイズ値をサポート」チェックボックスを有効にします。これにより、エディタは設定リストにないフォントサイズを保持できます。
色の構文が正しいことを確認してください。色は「rgb(255,255,255)|ラベル」または「#000000|ラベル」または「hsl(0,0%,0%)|ラベル」の形式である必要があります。各色は別々の行に記述してください。
フォントサイズの構文が正しいことを確認してください（例: 「16px|標準」）。無効な構文は設定の保存を妨げます。サポートされている単位（px、em、rem、pt、%）を使用していることを確認してください。
このモジュールは自動アップグレードパスを提供します。設定が移行されなかった場合は、CKEditor 5用のテキストフォーマット設定でフォントオプションを手動で再設定してください。
Security Notes 3
- フォントスタイリングはspan要素のインラインCSSスタイルとして適用されます。これは標準的なCKEditorの動作です
- このモジュールは、許可されたHTML要素とスタイルのみがレンダリングされることを保証するために、Drupalのテキストフォーマットフィルタリングに依存しています
- カラー値は悪意のあるコンテンツの注入を防ぐために正規表現パターンを使用して検証されます