嵌套的 TinyMCE 模态输入控件未获得焦点

Question

在一个页面上加载 5 个 TinyMCE 编辑器失败后，我决定创建“编辑”按钮，然后在模式中加载编辑器。

<Modal.Body>
      <FormGroup className="mb-3">
        <Editor name="text" label="Text" /> //My TinyMCE object
      </FormGroup>
</Modal.Body>

但是，当任何 TinyMCE 功能打开其自身的模式时，none 其输入控件将获得焦点。尝试在 Bootstrap Modal 上将 autoFocus 设置为 false，但仍然没有用。我发现这在过去已得到解决，如 this question。但是，与此类似，大多数回复都是为我不熟悉的 jQuery 量身定制的。任何基于 React 的解决方案？

Answer 1

假设您正在使用 react-bootstrap 库，那么您需要将 enforceFocus 属性设置为 false（而不是 autoFocus）。参见 https://react-bootstrap.github.io/components/modal/#modal-props

需要这样做的原因是 bootstrap 将尝试确保焦点永远不会出于可访问性目的而离开模态对话框。这通常很好，但在这种情况下，它与 TinyMCE 冲突，TinyMCE 本身需要打开新的模式对话框并将内容集中在里面（正如您已经提到的那样）。

嵌套的 TinyMCE 模态输入控件未获得焦点

Nested TinyMCE modal input controls not getting focused

tinymce

bootstrap-modal

reactjs