CKEditor 5 Paste Filter
設定可能な正規表現ベースの検索・置換ルールを使用して、CKEditor 5にペーストされたコンテンツをフィルタリングします。
ckeditor5_paste_filter
インストール
composer require 'drupal/ckeditor5_paste_filter:^1.1'
概要
CKEditor 5 Paste Filterは、カスタマイズ可能な正規表現ベースのフィルターセットを使用して、CKEditor 5テキストエリアにペーストされたコンテンツをクリーニングおよびサニタイズできます。各フィルターは、JavaScript正規表現パターンと置換文字列で構成されています。
最も一般的なユースケースは、Microsoft WordやGoogle Docsなどのリッチテキストソースから生成される乱雑なマークアップのクリーンアップです。Drupal CoreのCKEditor 5にはペーストクリーンアップ機能が含まれていますが、CKEditor 4の「Paste from Word」機能で利用可能だった包括的なフィルタリング機能は提供していません。このモジュールは、設定可能な正規表現ベースのコンテンツフィルタリングを提供することで、そのギャップを埋めます。
このモジュールは、CKEditor Paste FilterモジュールのCKEditor 5後継版です。CKEditor 4からCKEditor 5への移行中に両方のモジュールを同時にインストールできるよう、別プロジェクトとして作成されました。
Features
- 完全な正規表現サポート(global、ignoreCase、multiline、dotAll、unicodeフラグ)を備えたJavaScript正規表現を使用して、CKEditor 5でペーストされたコンテンツをフィルタリング
- Microsoft WordおよびGoogle Docsコンテンツのクリーンアップに最適化された13個のデフォルトフィルターがプリセット済み
- <o:p>タグ、style属性、class属性、face属性、valign属性などのOffice固有のマークアップを削除
- 意味のあるフォーマットを保持しながら、不要なfontタグとspanタグを除去
- 空の段落、太字、斜体要素を削除
- Microsoft Officeが挿入するOLE_LINKアンカータグをクリーンアップ
- 完全にカスタマイズ可能なフィルター設定:ドラッグ&ドロップでフィルターの追加、編集、削除、有効化/無効化、並べ替えが可能
- 置換文字列は検索式からのキャプチャグループ参照($1、$2など)をサポート
- テキストフォーマットごとに設定可能 - 異なるフォーマットに異なるペーストフィルタリングルールを設定可能
- 無効な正規表現に対するコンソールエラーログ付きの適切なエラーハンドリング
Use Cases
Microsoft Wordからペーストされたコンテンツのクリーニング
コンテンツエディターがMicrosoft Word文書からテキストをコピー&ペーストすると、ペーストされたコンテンツには通常、インラインスタイル、Office固有のXMLタグ(<o:p>)、fontタグとspanタグ、class属性、その他HTMLを乱雑にするフォーマットが過剰に含まれています。デフォルトのフィルターはこれらの要素を削除し、段落、太字、斜体、リンクなどのセマンティックマークアップのみを保持します。
Google Docsからペーストされたコンテンツのクリーニング
Wordと同様に、Google Docsもコンテンツをコピーすると不要なspanタグ、style属性、クラス名を生成します。ペーストフィルターはドキュメントのセマンティック構造を維持しながら、これらを除去します。
ペースト時のカスタムコンテンツ変換
クリーンアップ以外にも、正規表現ベースのシステムはカスタム変換に使用できます。例えば、特定のテキストパターンの自動変換、一般的なフォーマット問題の修正、サイト固有の要件に従ったマークアップの標準化などが可能です。
テキストエリアでのクリーンなHTMLの強制
厳格なコンテンツ基準を持つ組織は、ペーストされるすべてのコンテンツがHTML清浄度の要件を満たすようにフィルターを設定し、インラインスタイルや不要な属性がコンテンツデータベースに入るのを防ぐことができます。
CKEditor 4からの移行
CKEditor 4の「Paste from Word」機能に依存していたサイトは、このモジュールを使用してCKEditor 5でその動作を再現およびカスタマイズでき、クリーンアップ機能に慣れたコンテンツエディターにとって移行がスムーズになります。
Tips
- 設定に追加する前に、ブラウザコンソールを使用して正規表現をテストしてください。JavaScriptのRegExpコンストラクタは同じ構文を使用します。
- 置換文字列は、$1、$2などを使用して検索パターンからのキャプチャグループを参照できます。これは、周囲のマークアップを変更しながらマッチしたコンテンツの一部を保持するのに便利です。
- フィルターは重み順に実行されるため、複雑なクリーンアップ操作を複数の連続したフィルターに分割して保守性を高めることができます。
- すべてのデフォルトフィルターを削除してゼロから始めるには、各行の検索式フィールドを空にして保存するだけです。空の行は自動的に削除されます。
- デバッグ時は、フィルターを1つずつ一時的に無効にして、どのフィルターが予期しない動作を引き起こしているかを特定してください。
- エスケープが必要な正規表現の特殊文字には、\ . + * ? ^ $ { } [ ] ( ) | / - があります。それぞれの前にバックスラッシュを使用してください。
- 「g」(global)フラグは自動的に適用されるため、ペーストされたコンテンツ内のすべてのマッチが置換され、最初の出現だけではありません。
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format_name}
テキストフォーマットのCKEditor 5設定内でCKEditor 5 Paste Filterプラグインを設定します。CKEditor 5がテキストエディターとして選択されている場合、ペーストフィルター設定は「CKEditor 5プラグイン設定」の下の垂直タブとして表示されます。
Troubleshooting 5
テキストフォーマット設定で「Filter pasted content」チェックボックスが有効になっていることを確認してください。また、テーブル内の個々のフィルターの「有効」チェックボックスがチェックされていることも確認してください。
検索式の構文を確認してください。特殊な正規表現文字(スラッシュなど)はバックスラッシュでエスケープする必要があります。エラーメッセージでどの検索式が無効かが特定されます。
各フィルターの重み値を確認してください。重みが小さいフィルターが先に実行されます。ドラッグ&ドロップハンドルを使用するか、重み値を調整して実行順序を制御してください。
検索式と置換フィールドの両方が適切に入力されていることを確認してください。検索式が空の行は保存時に自動的に削除されます。
特定の不要なパターンをターゲットにしたカスタムフィルターを追加してください。ブラウザの開発者ツールを使用してペーストされたHTMLを検査し、適切な正規表現パターンを作成してください。一部のマークアップはフィルタリング後にCKEditor 5自体によって追加される場合があることを考慮してください。
Security Notes 2
- 正規表現は、ペーストされたコンテンツに対してブラウザのJavaScriptコンテキストで実行されます。これは表示されるコンテンツではなく編集中のコンテンツに対して動作しますが、マルチユーザー環境でのユーザー設定可能なパターンには注意が必要です。
- このモジュールはDrupalセキュリティチームからセキュリティカバレッジを受けており、セキュリティのベストプラクティスについてレビューされていることを示しています。