React集成TinyMCE置于Material UI Modal内对话框灰化无法输入

问题根因 #

该问题由Material UI Modal的默认焦点锁定机制导致：Modal默认会限制所有焦点操作仅在自身内部的DOM节点中生效，而TinyMCE的插入图片、链接等弹窗默认是直接挂载到document.body根节点下的，不在Modal的DOM层级范围内，因此被焦点锁拦截了所有输入操作，呈现出灰化无法交互的状态。

解决方案 #

以下两种方案任选其一即可修复：

方案1（操作最简单）：关闭Modal的焦点锁定 #

给你使用的Modal组件添加disableEnforceFocus属性，设置为true即可：

<Modal
  // 保留你原本的其他Modal属性
  disableEnforceFocus={true}
>
  {/* 原有内容，包括TinyMCE编辑器 */}
</Modal>

方案2（更符合隔离要求）：指定TinyMCE弹窗挂载节点 #

如果你不希望关闭Modal的全局焦点锁，可以显式指定TinyMCE的弹窗挂载到Modal内部的节点上，只需要在TinyMCE的init配置中新增dialog_container属性，值为Modal内部容器的选择器或者DOM元素即可，示例如下：

<Editor
    apiKey="APIKEY"
    onInit={(evt, editor) => {
        editorRef.current = editor;
        setLoadingEditor(1);
    }}
    initialValue="<p>Some initial text.</p>"
    init={{
        height: 440,
        menubar: true,
        // 新增该行，比如你给Modal内部的内容容器设置了id为modal-content
        dialog_container: '#modal-content',
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount',
            'image code',
        ],
        toolbar:
            'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | image | code | help',

        content_style:
            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    }}
/>

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