Ckeditor5でタグジャンプを傍受してジャンプロジックをカスタマイズする方法は？

CKEDITOR5の詳細な説明は、タグジャンプとカスタムジャンプロジックを妨害します

この記事では、CKEDITOR5リッチテキストエディターのAタグのデフォルトジャンプ動作を傍受し、カスタムジャンプロジックを実装する方法を紹介します。リンクとAutolinkプラグインを追加した後、デフォルトでは、ユーザーはCTRL/コマンドキーを押し、クリック中にリンクをクリックすると、新しいページにジャンプします。ただし、実際のアプリケーションでは、このジャンプを傍受したり、リンクアドレスを取得したり、データ分析などのカスタムアクションを実行したり、特定のページにジャンプする必要がある場合があります。直接<a></a>CKEDITOR5の内部メカニズムがタグ属性をリセットするため、タグのバインディングonclickイベントは無効です。トラバーサルとすべてを変更します<a></a>タグのhref属性も、エディターの更新により無効になります。

解決策：イベントキャプチャメカニズムを利用します

上記の問題を解決するために、イベントキャプチャメカニズムを使用してクリックイベントをリッスンします。イベントリスナーをエディターコンテナに追加して、クリックターゲットがあるかどうかを判断します<a></a>タグ、インターセプトデフォルトジャンプ。

次のコードスニペットは、それを実装する方法を示しています。

 document.getElementById（ 'Editor'）。AddEventListener（ 'Click'、（e）=> {
  if（e.target.tagname === 'a'）{//タグe.preventdefault（）; //デフォルトのジャンプconst href = e.target.getattribute（ 'href'）を防ぐ;
    console.log（ 'Captured link：'、href）;
    const ismac = /macintosh | mac os x /i.test（navigator.useragent）;
    if（（ismac && e.metakey）|| e.ctrlkey）{
      console.log（ 'ctrl/commandキーを押します。'）;
      //ここにカスタムジャンプロジックを追加する//たとえば：fetchまたはxmlhttprequestを使用してリクエストを送信するか、別のページにジャンプする// window.location.href = 'your_custom_url' href; 
      //またはより複雑なロジックを使用してHREFを処理します
    }
  }
}、 真実）; // True Enable Event Capture

コード説明：

• addEventListener('click', ..., true) ：イベントキャプチャモードを使用して、CKEDITOR5がプロパティをリセットする前にイベントが傍受されることを確認します。
• e.preventDefault() ：デフォルトのジャンプ動作を防ぎます。
• e.target.getAttribute('href') ：get<a></a>タグのhref属性。
• isMac ：MacおよびWindowsシステムと互換性のあるオペレーティングシステムを審査します。
• e.metaKey （Mac） / e.ctrlKey （Windows）：Ctrl / Commandキーを押すかどうかを判断します。
• 'your_custom_url' href ：これは、カスタムロジックとURLに置き換えるために必要な例です。この部分は、ジャンプするかどうかを決定する前にデータ処理のためにAJAX要求をサーバーに送信するなど、お客様のニーズに応じてより複雑に処理できます。

イベントキャプチャメカニズムを通じて、CKEDITOR5を正常に傍受しました5<a></a> TAGのデフォルトジャンプとCTRL/コマンドキーを押すときにカスタムロジックを実行し、直接修正を回避します<a></a>タグ属性によって引き起こされる問題は、CKEDITOR5によってリセットされます。 'your_custom_url'実際の処理ロジックに置き換えることを忘れないでください。

以上がCkeditor5でタグジャンプを傍受してジャンプロジックをカスタマイズする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。