TinyMCE设置tabindex后按TAB键进入无法正常触发focus事件问题

问题核心原因 #

承载编辑器的外层div设置tabindex后，首次按TAB导航时焦点首先落在外层div上，触发编辑器初始化。此时你在init回调中调用editor.focus()虽然能把光标移入编辑区，但外层div的焦点状态未释放，TinyMCE内部的focus事件没有被正确触发，依赖focus状态的工具栏加载逻辑也就不会执行。第二次TAB切出再切入时编辑器已初始化完成，焦点直接落在内部可编辑区域，就能正常触发focus事件。

解决方案 #

调整初始化触发逻辑+修复初始化后的焦点时序问题即可，不需要依赖tab_focus插件，完全适配懒加载多编辑器场景：

1. 将编辑器初始化的触发事件从点击改为外层容器的focus事件，覆盖点击、TAB切入两种触发场景
2. 初始化完成后先释放外层容器的焦点占用，再触发编辑器focus，保证focus事件正常冒泡

完整代码示例

// 所有懒加载TinyMCE容器统一绑定focus事件触发初始化
document.querySelectorAll('.tinymce-container').forEach(container => {
  let editorInited = false;
  container.addEventListener('focus', () => {
    if (editorInited) return;
    tinymce.init({
      target: container,
      // 保留你的其他原有配置项
      setup: function(editor) {
        editor.on("init", function() {
          console.log('init');
          // 方案1：移除外层容器的tabindex，避免后续焦点冲突
          container.removeAttribute('tabindex');
          // 方案2：如果需要保留外层tabindex，替换上面一行为 container.blur()

          // 短延时保证编辑器可编辑区域渲染完成后再触发focus
          setTimeout(() => {
            editor.focus();
            // 兜底逻辑：如果仍未触发focus事件，手动派发
            if (!editor.hasFocus()) editor.fire('focus');
          }, 10);
        });
        editor.on("focus", function() {
          console.log('focus');
          // 你的原有工具栏加载逻辑
        });
      }
    });
    editorInited = true;
  });
});

额外注意事项 #

• 10ms的延时可根据实际渲染速度调整，也可替换为MutationObserver监听编辑区DOM节点挂载完成后触发focus，兼容性更好
• 多编辑器场景下每个容器的初始化标记独立，不会互相影响，符合懒加载需求
• 如果你使用的是inline模式的TinyMCE，优先选择方案2主动调用外层容器blur，不要移除tabindex

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