启用/禁用CKEditor4后模板JS失效 标签导航无法正常工作

根因分析 #

该问题由CKEditor4内部事件监听清理逻辑缺陷导致：

• 当点击编辑器内的<a>标签激活编辑器时，CKEditor为了支持链接编辑功能（如点击弹出链接编辑浮层），会给触发激活的<a>标签单独绑定点击事件拦截逻辑，默认阻止标签的默认跳转行为
• 调用setReadOnly(true)禁用编辑器时，CKEditor仅清理了普通编辑节点的事件监听，遗漏了<a>标签上的跳转拦截标记，导致禁用后点击标签无响应
• 点击非标签区域激活编辑器时，事件监听绑定在普通容器/文本节点上，禁用时可被正常清理，因此不会触发该问题

解决方案 #

提供三种可落地的修复方案，可根据项目场景选择：

方案1：禁用前主动清理编辑器内部缓存（最推荐，无侵入性） #

在调用编辑器禁用逻辑前，先执行内部状态清理代码，再切换只读状态：

// editor 为你当前CKEditor实例对象
// 清空当前选区，移除元素绑定的编辑态标记
editor.getSelection()?.removeAllRanges();
// 主动触发blur事件，清理内部劫持的事件监听
editor.fire('blur');
// 最后执行禁用逻辑
editor.setReadOnly(true);

方案2：只读状态下强制放开链接点击权限 #

如果不想修改原有禁用逻辑，可在编辑器只读状态切换钩子中添加兜底处理：

// 监听编辑器只读状态变更事件
editor.on('readOnly', () => {
  if (editor.readOnly) {
    const editableRoot = editor.editable().$;
    // 遍历编辑器内所有a标签，移除点击限制
    editableRoot.querySelectorAll('a').forEach(link => {
      link.style.pointerEvents = 'auto';
      link.removeAttribute('data-cke-saved-href');
    });
  }
})

方案3：CSS快速修复 #

如果仅需要临时验证修复效果，可添加全局样式强制放开编辑器内链接的点击权限：

.ck-editor__editable a {
  pointer-events: auto !important;
}

内容的提问来源于stack exchange，提问作者Arman Gasparyan