CKEditor5中如何攔截A標(biāo)簽的Ctrl/Command+點擊跳轉(zhuǎn)？

ckeditor5中攔截a標(biāo)簽跳轉(zhuǎn)的有效方案

在CKEditor5富文本編輯器中，使用link和autolink插件生成的鏈接（a標(biāo)簽）默認(rèn)會在用戶按下Ctrl/Command鍵的同時點擊時跳轉(zhuǎn)。 然而，某些應(yīng)用場景需要攔截此跳轉(zhuǎn)行為，并在跳轉(zhuǎn)前獲取鏈接地址進(jìn)行自定義處理。 直接修改href屬性或綁定onclick事件并不可靠，因為CKEditor內(nèi)部機(jī)制會覆蓋這些修改。

本文提供一種可靠的解決方法，利用事件捕獲機(jī)制攔截點擊事件：

通過在事件冒泡階段（而非目標(biāo)階段）監(jiān)聽click事件，我們可以提前截獲點擊行為。 關(guān)鍵代碼如下：

document.getElementById('editor').addEventListener('click', (e) => {   if (e.target.tagName === 'A') { // 檢查目標(biāo)元素是否為a標(biāo)簽     const isCtrlOrCmd = (e.ctrlKey || e.metaKey); // 判斷是否按下Ctrl或Command鍵     if (isCtrlOrCmd) {       e.preventDefault(); // 阻止默認(rèn)跳轉(zhuǎn)行為       const href = e.target.getAttribute('href');       console.log('攔截到的鏈接地址：', href);       // 在此處添加你的自定義邏輯，例如：       // 使用fetch或XMLHttpRequest發(fā)送請求       // 打開新的窗口或標(biāo)簽頁 window.open(href, '_blank');       //  根據(jù)href進(jìn)行其他操作     }   } }, true); // true 表示使用事件捕獲

這段代碼的關(guān)鍵在于addEventListener的第三個參數(shù)true，它開啟了事件捕獲階段的監(jiān)聽。 這樣，在事件冒泡到a標(biāo)簽之前，我們的監(jiān)聽器就會先被觸發(fā)，從而有效攔截跳轉(zhuǎn)。 e.preventDefault()阻止了默認(rèn)跳轉(zhuǎn)，e.target.getAttribute(‘href’)獲取了鏈接地址。 代碼還清晰地判斷了Ctrl/Command鍵是否按下，確保只在組合鍵點擊時才執(zhí)行自定義邏輯。 請將console.log替換為你的實際自定義處理邏輯。 此方法有效解決了CKEditor內(nèi)部機(jī)制覆蓋自定義事件的問題。