ckeditor5中拦截并自定义处理a标签跳转
在CKEditor5富文本编辑器中，使用link和autolink插件生成的链接(标签)默认会在用户按下Ctrl/Command键的同时点击时在新页面打开。然而，实际应用中，我们可能需要拦截此跳转行为，获取链接地址并执行自定义逻辑，例如添加额外跳转步骤或进行权限验证。直接在<a></a>标签上绑定onclick事件并阻止默认行为不可靠，因为编辑器可能会重置标签属性。
本文提供一种可靠的解决方案，主要解决两个问题：无法监听Ctrl/Command+点击事件；以及编辑器重置<a></a>标签属性。
核心方法是利用事件捕获机制监听点击事件。我们不直接在<a></a>标签上绑定事件，而是在编辑器容器上添加事件监听器，并使用事件捕获阶段(true)捕获事件。这样，即使编辑器重置了<a></a>标签属性，我们仍然可以在事件捕获阶段拦截点击事件。
以下代码演示如何使用事件捕获和preventDefault()方法阻止默认跳转，并获取<a></a>标签的href属性：
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 = /macintosh|mac os x/i.test(navigator.userAgent);
if ((isMac && e.metaKey) || e.ctrlKey) {
console.log('Ctrl/Command键被按下'); // 在此处添加自定义跳转逻辑
// 例如：window.open(href, '_blank'); 或者 执行其他自定义操作
}
}
}, true); // 使用事件捕获阶段
这段代码首先判断点击目标是否为<a></a>标签。如果是，则调用e.preventDefault()阻止默认跳转。然后，获取<a></a>标签的href属性，并判断用户是否按下了Ctrl或Command键。最后，根据条件执行自定义跳转逻辑。 通过事件捕获，我们确保在编辑器修改<a></a>标签属性之前拦截点击事件，从而实现预期效果。 注意，代码已修正了window.event的兼容性问题，使用更现代的e对象。 此方法有效解决了文中提到的两个难点。
