Ace编辑器在Iframe (react-frame-component)中不起作用

Question

tl;dr Demo of Issue

我正在尝试通过React 16在iframe中集成Ace Editor。我正在使用react-ace组件库，尽管如果我在本地实现编辑器也会存在这个问题。

虽然当我在react-frame-component中包装编辑器时，一切都可以正常工作，但我不能选择突出显示文本，这会使编辑器不可用。我怀疑这可能与react-frame-component是用门户实现的事实有关，但我不确定到底是什么问题。

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

Answer 1

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