iframe - Ace 编辑器在 iframe 中不起作用（react-frame-component）

Question

tl;dr问题演示

我正在尝试通过 React 16 将Ace Editor集成到 iframe 中。我正在使用react-ace组件库，但如果我也以本机方式实现该编辑器，则会存在此问题。

尽管当我将编辑器包装在react-frame-component中时一切正常，但我无法选择使编辑器无法使用的突出显示文本。我怀疑这可能与react-frame-component使用 Portals 实现的事实有关，但我不确定到底是什么问题。

我在这里复制了这个问题。如果我使用<iframe src />来自另一个域的常规加载组件，我认为不存在此问题。

Answer 1

react-frame-component 将代码保留在父窗口中，并将元素添加到 iframe 中，这会混淆 ace 中的鼠标处理代码以将事件侦听器添加到在https://github.com/ajaxorg/ace/blobvar document = el.ownerDocument之前 添加的错误文档/v1.4.10/lib/ace/lib/event.js#L111会有所帮助。