TinyMCE技术求助：插入分割标签后禁止输入及光标偏移问题修复

看起来你在TinyMCE里实现分割标签时踩了几个常见的坑，我帮你梳理下解决方案，直接上可落地的代码和思路：

核心问题分析 #

你遇到的三个问题本质上都是因为没有正确处理分割元素的可编辑性、光标定位和回车事件：

1. 内容插入到伪span内部：因为你的span是可编辑的，编辑器会把它当成普通编辑节点；
2. 回车复制标签：编辑器默认会复制当前块的结构，而你没拦截这个行为；
3. 光标偏移：没有手动控制插入标签后的光标位置，也没限制光标进入不可编辑区域。

正确的实现方案 #

我们用不可编辑的块级元素来做分割标签，配合编辑器事件拦截来解决所有问题：

1. 自定义插件代码

tinymce.PluginManager.add('cuttag', function(editor) {
  // 定义插入分割标签的命令
  editor.addCommand('insertCutTag', function() {
    // 创建不可编辑的分割元素
    const cutTag = editor.dom.create('div', {
      class: 'cut-tag',
      contenteditable: 'false', // 关键：设置为不可编辑
      'data-cut': 'true' // 自定义属性，方便后续识别
    }, '--- 分割线 ---');

    // 获取当前光标位置
    const selection = editor.selection;
    const range = selection.getRng();

    // 插入分割标签到光标处
    range.insertNode(cutTag);

    // 强制把光标移到分割标签的后面，避免光标停在标签里
    const newRange = editor.dom.createRng();
    newRange.setStartAfter(cutTag);
    newRange.setEndAfter(cutTag);
    selection.setRng(newRange);
  });

  // 添加工具栏按钮
  editor.ui.registry.addButton('cuttag', {
    icon: 'horizontal-rule', // 用内置的水平线图标，也可以自定义
    tooltip: '插入分割标签',
    onAction: () => editor.execCommand('insertCutTag')
  });

  // 拦截回车事件，防止复制分割标签
  editor.on('keydown', function(e) {
    if (e.key !== 'Enter') return;

    const currentNode = editor.selection.getNode();
    const cutTag = currentNode.closest('[data-cut]');

    // 如果光标在分割标签附近，拦截默认回车行为
    if (cutTag) {
      e.preventDefault();
      e.stopPropagation();

      const range = editor.selection.getRng();
      // 判断光标在分割标签的上方还是下方
      const isBeforeTag = range.comparePoint(cutTag, 0) === -1;

      // 创建新的可编辑段落
      const newPara = editor.dom.create('p');
      if (isBeforeTag) {
        // 光标在标签前，把新段落插在标签上方
        cutTag.parentNode.insertBefore(newPara, cutTag);
      } else {
        // 光标在标签后，把新段落插在标签下方
        cutTag.parentNode.insertBefore(newPara, cutTag.nextSibling);
      }

      // 把光标移到新段落里
      const newRange = editor.dom.createRng();
      newRange.setStart(newPara, 0);
      newRange.setEnd(newPara, 0);
      editor.selection.setRng(newRange);
    }
  });

  // 防止光标进入不可编辑的分割标签
  editor.on('selectionchange', function() {
    const currentNode = editor.selection.getNode();
    const cutTag = currentNode.closest('[data-cut]') || currentNode;

    if (cutTag.hasAttribute('data-cut')) {
      // 强制把光标移到标签后面
      const newRange = editor.dom.createRng();
      newRange.setStartAfter(cutTag);
      newRange.setEndAfter(cutTag);
      editor.selection.setRng(newRange);
    }
  });
});

2. 自定义CSS（content_css里添加）

.cut-tag {
  width: 100%;
  text-align: center;
  padding: 8px 0;
  margin: 16px 0;
  border-top: 1px dashed #999;
  border-bottom: 1px dashed #999;
  color: #666;
  cursor: default;
  user-select: none; /* 禁止选中文字 */
}

关键修复点说明 #

• 不可编辑元素：用contenteditable="false"直接阻止用户在分割标签内输入，从根源解决内容插入到标签内部的问题；
• 光标强制定位：插入标签后手动把光标移到标签后面，同时监听selectionchange事件，防止用户误选标签内部；
• 回车事件拦截：当在分割标签附近回车时，不使用编辑器默认的块复制逻辑，而是手动创建新段落并移动光标，彻底避免标签被复制。

这个方案在TinyMCE 5和6版本都能正常工作，你可以直接替换掉原来的插件代码试试~

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