如何在CKEditor 4的<th>标签内禁用回车键？

直接通过监听编辑器的按键事件，判断光标所在的父元素是否为<th>，如果是则阻止回车键的默认行为，具体实现如下：

实现步骤 #

• 在编辑器初始化完成后，绑定keydown事件监听
• 仅对回车键（keyCode 13）进行处理
• 获取当前光标所在的起始元素，向上遍历父节点，检查是否存在<th>
• 若找到<th>，阻止回车的默认动作

代码示例 #

CKEDITOR.replace('your-editor-id', {
  // 你的其他编辑器配置项
  onInstanceReady: function(editor) {
    editor.on('keydown', function(evt) {
      // 只处理回车键
      if (evt.data.keyCode !== 13) return;

      const selection = editor.getSelection();
      const startElement = selection.getStartElement();
      let currentElement = startElement;

      // 向上遍历DOM树，查找<th>父元素
      while (currentElement) {
        if (currentElement.getName() === 'th') {
          // 阻止默认行为，禁止生成<p>标签
          evt.data.preventDefault();
          evt.stopPropagation();
          return;
        }
        currentElement = currentElement.getParent();
      }
    });
  }
});

说明 #

• 不用enterMode配置的原因是它全局生效，无法单独针对<th>标签做特殊处理
• 遍历父节点的方式可以覆盖光标在<th>内任意位置的情况（包括文本节点、嵌套行内元素等）
• 阻止keydown事件的默认行为，就能避免编辑器在<th>内生成无效的<p>标签

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