CKEditor 5 Icons: 高速でネイティブな Font Awesome アイコンピッカー
CKEditor 5 向けの高速でネイティブな Font Awesome アイコンピッカー。エディター内で直接アイコンを閲覧、検索、挿入できます。
ckeditor5_icons
インストール
composer require 'drupal/ckeditor5_icons:^1.2'
概要
CKEditor 5 Icons は、Font Awesome アイコンを CKEditor 5 の編集体験に直接統合する強力なモジュールです。CKEditor 5 の最新の TypeScript API を使用して構築されており、コンテンツ編集者がエディターインターフェースを離れることなく Font Awesome アイコンを閲覧、検索、選択できるシームレスなアイコンピッカーを提供します。
このモジュールは Font Awesome 5 と Font Awesome 6 の両方をサポートしており、無料版と Pro 版の両方に対応しています。アイコンはテキストとインラインで挿入でき、アイコンを選択すると表示される便利なウィジェットツールバーを使用してサイズ、スタイル、配置を簡単に変更できます。アイコンピッカーはカテゴリーフィルタリング、リアルタイム検索、よく使用するアイコン用のカスタマイズ可能な「おすすめ」カテゴリーを備えています。
パフォーマンスは非同期メタデータ読み込みによって最適化されており、ピッカーが開かれたときにのみアイコンデータを取得することで初期ページ読み込み時間を短縮しています。メタデータは後続のリクエストのためにブラウザーによってキャッシュされます。
Features
- CKEditor 5 ツールバーに直接統合されたネイティブ Font Awesome アイコンピッカー
- Font Awesome 5（v5.15.4）と Font Awesome 6（v6.7.2）の両方をサポート
- カテゴリー別にアイコンを閲覧、またはアイコン名とキーワードで検索
- 挿入後にアイコンのサイズ、スタイル、配置を変更できるウィジェットツールバー
- Extra Small から 10x までの14種類のサイズオプション
- 3種類の配置オプション：テキストとインライン、左寄せ、右寄せ
- 7種類のスタイルオプション：Solid、Regular、Light、Thin、Duotone、Brands、Custom（Pro スタイルには Font Awesome Pro が必要）
- よく使用するアイコンへのクイックアクセス用に設定可能な「おすすめ」カテゴリー
- ブラウザーキャッシュによるページパフォーマンス最適化のための非同期メタデータ読み込み
- カスタム/Pro メタデータ用の Font Awesome Icons モジュールとの統合
- Font Awesome クラスを持つ標準 HTML <i> 要素としてアイコンを出力
- General HTML Support および Link プラグインとの完全な互換性
Use Cases
コンテンツへのアイコン追加
コンテンツ編集者は CKEditor 5 ツールバーの Icons ボタンをクリックしてアイコンピッカーを開くことができます。カテゴリー別にアイコンを閲覧したり、名前やキーワードで検索したりして、クリックすることで選択したアイコンをカーソル位置に挿入できます。アイコンはテキストとインラインで挿入されます。
挿入後のアイコンスタイル設定
アイコンを挿入した後、それをクリックするとウィジェットツールバーが表示され、アイコンのサイズ（Extra Small から 10x まで）、配置（インライン、左寄せ、右寄せ）、スタイル（Solid、Regular、Brands など）を変更するためのドロップダウンメニューが利用できます。
おすすめアイコンリストの作成
サイト管理者は、テキストフォーマット設定でおすすめカテゴリーを設定して、よく使用するアイコンへのクイックアクセスを提供できます。これはコンテンツ全体で一貫したアイコン使用を維持するのに役立ちます。
Font Awesome Pro アイコンの使用
Font Awesome Pro を持つサイトは、Font Awesome Icons Contrib モジュールをインストールし、Icons プラグイン設定でメタデータソースを Custom に設定できます。これにより、Light、Thin、Duotone などの Pro 専用スタイルへのアクセスが可能になります。
ページ読み込みパフォーマンスの最適化
デフォルトでは、アイコンメタデータはすべてのページ読み込み時ではなく、ピッカーが最初に開かれたときに非同期で読み込まれます。これにより初期ページサイズが大幅に削減され、本番サイトに推奨されます。
Tips
- アイコンピッカーの検索機能を使用して、名前や関連用語でアイコンをすばやく見つけることができます
- アイコンは最初にアイコンを挿入し、それを選択してからリンクボタンを使用することでリンク内に配置できます
- パフォーマンスを向上させるために、本番環境では「メタデータを非同期で読み込む」オプションを有効のままにしてください
- おすすめカテゴリーは、コンテンツ編集者向けにブランド承認済みアイコンの厳選セットを作成するのに役立ちます
- アイコンは標準の Font Awesome CSS クラスを使用するため、Font Awesome テーマのカスタマイズは自動的に適用されます
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format_id}
テキストフォーマットの CKEditor 5 設定内で CKEditor 5 Icons プラグインの設定を行います。Icons プラグインの設定は、Icons ボタンをツールバーに追加すると表示されます。
Troubleshooting 4
Font Awesome CSS ライブラリがサイトに正しく読み込まれていることを確認してください。これはテーマの CSS、CDN リンク、または Font Awesome Icons Contrib モジュール経由で行えます。プラグイン設定で選択したバージョンは、読み込まれたライブラリバージョンと一致する必要があります。
Font Awesome Icons Contrib モジュールをインストールして設定し、Icons プラグイン設定でメタデータソースを「Custom」に設定してください。Font Awesome Pro キットまたは CSS が正しく読み込まれていることを確認してください。
トラブルシューティングとして、プラグイン設定で「メタデータを非同期で読み込む」を無効にしてみてください。ブラウザーコンソールで CSRF トークンエラーやメタデータエンドポイントとのネットワーク問題を確認してください。
これはアイコン名がメタデータで認識されていない場合に発生する可能性があります。選択した Font Awesome バージョンにアイコンが存在し、メタデータが正しく読み込まれていることを確認してください。