ckeditor5中拦截a标签跳转并自定义处理逻辑
在CKEditor5富文本编辑器中，使用link和autolink插件生成的链接默认会在按下Ctrl或Command键的同时点击时在新标签页打开。然而，许多应用场景需要拦截此跳转行为，提取a标签的href属性，并在跳转前执行自定义逻辑。本文将详细介绍如何实现这一目标，并解决监听不到Ctrl/Command+点击事件以及href属性被重置的问题。
直接在a标签上绑定onclick事件或修改href属性并不能有效阻止默认跳转，因为CKEditor5内部机制会不断更新DOM，导致直接操作DOM的方式失效。
解决方法的关键在于利用事件捕获机制，在事件冒泡到a标签之前拦截事件。以下代码片段演示了如何使用事件捕获监听click事件并阻止默认跳转：
document.getElementById('editor').addEventListener('click', (e) => {
if (e.target.tagName === 'A') { // 判断目标是否为a标签
e.preventDefault(); // 阻止默认跳转
const href = e.target.getAttribute('href');
console.log('href:', href);
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; // 判断操作系统
if ((isMac && e.metaKey) || e.ctrlKey) {
console.log('Ctrl/Command键被按下');
// 在此处添加自定义跳转逻辑
// 例如：使用fetch或XMLHttpRequest发送请求，处理数据后跳转
// 或者使用window.open打开新页面等
}
}
}, true); // true表示使用事件捕获
这段代码在编辑器容器上添加click事件监听器，true参数启用事件捕获。代码判断点击目标是否为a标签，如果是则调用e.preventDefault()阻止默认跳转，获取href属性并进行相应的自定义逻辑处理。 代码使用更可靠的navigator.platform方法判断操作系统，避免window.event的兼容性问题。 通过事件捕获，确保在CKEditor5内部机制重置DOM之前处理点击事件，从而解决了href属性被重置的问题。
通过此方法，成功拦截了a标签的默认跳转行为，并在按下Ctrl/Command键的同时点击时获取href属性并执行自定义逻辑，满足了预期功能。
