TinyMCE + Firefox IME（拼音输入法）完成输入按空格后光标不移动

问题分析 #

这是Firefox与TinyMCE在IME输入法事件处理上的兼容性差异导致的——Chrome会自动同步光标与实际插入内容的位置，但Firefox在IME完成输入并插入空格后，未正确触发光标视觉更新，尽管DOM中的空格已存在。

可行解决方案 #

1. 监听Input事件手动同步光标

通过TinyMCE的input事件，在Firefox环境下检查光标位置，强制同步到空格后方：

tinymce.init({
  selector: '#your-editor',
  setup: function(editor) {
    editor.on('input', function() {
      if (!navigator.userAgent.includes('Firefox')) return;
      
      const range = editor.selection.getRng();
      const startNode = range.startContainer;
      const startOffset = range.startOffset;
      
      // 检查光标前是否为空格，且光标未正确后移
      if (startOffset > 0 && startNode.textContent.charAt(startOffset - 1) === ' ') {
        range.setStart(startNode, startOffset);
        range.setEnd(startNode, startOffset);
        editor.selection.setRng(range);
      }
    });
  }
});

2. 升级TinyMCE至最新稳定版

TinyMCE的新版本（如6.x系列）针对Firefox的IME兼容性做了优化，很多旧版本存在的光标同步问题已被修复。先确认当前版本，升级后重新测试。

3. 排查编辑器自定义样式影响

部分自定义的内容样式（如异常行高、特殊字体）可能干扰Firefox的光标渲染。尝试暂时恢复TinyMCE默认的content_css，或调整样式确保文本节点渲染正常：

/* 编辑器内容区基础样式调整 */
.mce-content-body * {
  line-height: 1.4;
  font-family: system-ui, sans-serif;
}

4. 监听Firefox专属IME完成事件

利用Firefox的compositionend事件（IME输入完成时触发），延迟调整光标位置确保DOM更新完成：

tinymce.init({
  selector: '#your-editor',
  setup: function(editor) {
    editor.on('init', function() {
      editor.getBody().addEventListener('compositionend', function(e) {
        setTimeout(() => {
          const target = e.target;
          const range = editor.selection.getRng();
          range.setStart(target, target.textContent.length);
          range.setEnd(target, target.textContent.length);
          editor.selection.setRng(range);
        }, 0);
      });
    });
  }
});

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