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

【问题标题】：Ace Editor does not work in Iframe (react-frame-component)Ace 编辑器在 iframe 中不起作用（react-frame-component）
【发布时间】：2020-05-17 00:07:13
【问题描述】：

tl;博士Demo of Issue

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

虽然当我将编辑器包装在react-frame-component 中时，一切都正常工作，但我无法选择高亮文本，这会使编辑器无法使用。我怀疑这可能与 react-frame-component 是通过 Portal 实现的这一事实有关，但我不确定到底是什么问题。

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

【问题讨论】：

标签： iframe ace-editor react-portal react-frame-component

【解决方案1】：

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

【讨论】：

我认为你是对的，关于如何在不分叉库的情况下规避这个问题的任何想法？ react-frame-library 有 FrameContextConsumer (github.com/ryanseddon/…) 我总是可以检索 iframe 文档。不知道如何用 3rd 方库重新指向它。
最好的方法是向 ace 发出拉取请求，monkeypatching ace.require("ace/lib/event").capture 可以作为临时解决方案