兄弟，我之前做转录报告编辑器的时候，也被TinyMCE自带的nonbreaking插件坑过——尤其是选中文本编辑时的 glitch 简直让人头大。后来折腾出几个稳定的自定义制表位实现思路，给你参考下：

方法一：自定义内联格式+键盘事件拦截 #

这个思路是用自定义的内联元素模拟Word式制表位，完全绕开自带插件的问题：

• 首先在编辑器初始化时注册一个自定义格式，给它设置固定宽度的内联块样式，确保不破坏文本流
• 拦截Tab键的默认行为，插入我们的自定义制表位元素，同时处理Shift+Tab的删除逻辑

React中的配置示例：

const editorConfig = {
  plugins: 'code', // 按需添加你需要的其他插件
  extended_valid_elements: 'span[class|style]', // 确保自定义span不被编辑器过滤
  content_style: `
    .custom-tab {
      display: inline-block !important;
      width: 4em !important; /* 可根据需求调整宽度，和Word制表位对齐 */
      white-space: nowrap !important;
    }
  `,
  setup: (editor) => {
    // 注册自定义制表位格式
    editor.formatter.register('customTab', {
      inline: 'span',
      classes: 'custom-tab',
      content: ' '
    });

    // 监听Tab/Shift+Tab按键
    editor.on('keydown', (e) => {
      if (e.key === 'Tab') {
        e.preventDefault(); // 阻止默认的缩进/换行行为

        if (e.shiftKey) {
          // 处理Shift+Tab：删除最近的一个自定义制表位
          const selectionRange = editor.selection.getRng();
          const targetNodes = editor.dom.select('.custom-tab', selectionRange.commonAncestorContainer);
          if (targetNodes.length > 0) {
            editor.dom.remove(targetNodes[targetNodes.length - 1]);
          }
        } else {
          // 插入自定义制表位
          editor.execCommand('mceInsertContent', false, '<span class="custom-tab">&nbsp;</span>');
        }
      }
    });
  }
};

方法二：优化选中文本时的插入逻辑 #

如果你需要在选中文本时也能稳定插入制表位（比如在选中内容前后添加），可以调整键盘事件的处理逻辑，避免编辑器因为选中范围识别问题出现 glitch：

editor.on('keydown', (e) => {
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    const isTextSelected = !editor.selection.isCollapsed;
    if (isTextSelected) {
      // 选中文本时，在选中内容末尾插入制表位
      editor.selection.collapse(false);
    }
    editor.execCommand('mceInsertContent', false, '<span class="custom-tab">&nbsp;</span>');
  }
});

这种处理方式会先把光标移到选中内容的末尾，再插入制表位，不会触发编辑器对选中内容的异常渲染。

关键注意事项 #

• 一定要配置extended_valid_elements或者valid_elements，确保我们的自定义span元素不会被TinyMCE的内容清理规则删掉
• 用!important锁定样式，避免被编辑器的默认样式覆盖
• 测试时要重点验证选中文本编辑、连续插入制表位、删除制表位这几个场景，确保没有卡顿或错位

内容来源于stack exchange