嵌套的TinyMCE模态输入控件没有得到聚焦

Question

在一个页面加载5个TinyMCE编辑器失败后，我决定创建"edit"按钮，然后在一个模态中加载编辑器。

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

但是当TinyMCE的任何一个特性打开它自己的模态时，它的输入控件都没有得到聚焦。尝试在引导模式上设置自动聚焦为false，但仍然没有用。我发现这个问题在过去已经解决了，就像这个问题一样。然而，与此类似，大多数响应都是针对jQuery定制的，而我对jQuery并不熟悉。任何基于React的解决方案?

Answer 1

假设您正在使用react-bootstrap库，那么您需要将enforceFocusprop设置为false(而不是autoFocus)。看到https://react-bootstrap.github.io/components/modal/modal-props

需要这样做的原因是bootstrap将尝试确保焦点永远不会离开模态对话框以达到可访问性的目的。这通常是好的，但是在这种情况下，它与TinyMCE冲突，TinyMCE本身需要打开新的模态对话框并关注其中的内容(正如您已经提到的)。