TinyMCE表格插件在material-ui Modal中加载运行异常如何解决

问题根因 #

你遇到的所有异常均来自Material UI Modal默认机制和TinyMCE浮层、事件逻辑的冲突，单独页面的编辑器实例正常、仅Modal内实例异常，已经可以锁定问题出在Modal配置和编辑器初始化时机上，对应解决方案如下：

解决方案 #

1. 修改Material UI Modal的焦点限制配置
   Material UI Modal默认会强制锁定焦点在模态框内部DOM节点上，而TinyMCE的表格选择网格、属性弹窗默认是动态插入到document.body根节点下的，不在Modal的DOM层级内，会被焦点拦截机制限制交互。给Modal组件添加以下两个属性即可解决：

<Modal
  disableEnforceFocus={true}
  disableRestoreFocus={true}
  // 保留你原本的其他配置
>
  {/* 编辑器容器内容 */}
</Modal>

2. 调整TinyMCE浮层层级
   Material UI Modal默认z-index为1200，TinyMCE默认浮层z-index可能低于该值导致交互失效，在TinyMCE的初始化配置中添加z-index配置即可：

tinymce.init({
  // 其他原有配置保留
  zindex_base: 1300
})

3. 修正编辑器初始化时机
   必须等Modal完全渲染展开后再初始化TinyMCE实例，Modal关闭时要销毁当前编辑器实例，避免和全局的编辑器实例冲突。可以配合useEffect监听Modal的open状态实现：

const [modalOpen, setModalOpen] = useState(false)
useEffect(() => {
  if (modalOpen) {
    //  Modal打开后初始化TinyMCE
    tinymce.init({/* 你的编辑器配置 */})
  } else {
    // Modal关闭后销毁实例
    tinymce.get('你的编辑器ID')?.destroy()
  }
}, [modalOpen])

4. 校验表格插件配置
   确认Modal内的TinyMCE实例配置和单独页面的配置完全一致，plugins字段已包含table，没有额外配置限制表格行列的相关参数。

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