CKEditor 5 Paste Filter

設定可能な正規表現ベースの検索・置換ルールを使用して、CKEditor 5にペーストされたコンテンツをフィルタリングします。

ckeditor5_paste_filter
13,057 sites
30
drupal.org

インストール

Drupal 11, 10, 9 v1.1.1
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
テキストフォーマット設定 - Paste Filter設定 /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セキュリティチームからセキュリティカバレッジを受けており、セキュリティのベストプラクティスについてレビューされていることを示しています。