在单独的窗口中渲染 Monaco 编辑器

Question

我正在开发一个应用程序，需要在单独的窗口中使用代码编辑器。我想为此使用摩纳哥编辑器，但在新窗口中渲染它时编辑器似乎不起作用。

这是一个具有最小复制示例的codesandbox：https://codesandbox.io/s/objective-stonebraker-rvleh

如果在新窗口中打开开发工具，您可以看到编辑器 Markdown 已渲染，但不可见。我希望在新窗口中也能看到编辑器。有谁知道为什么看不到吗？

Answer 1

事实上，使用反应组件

MonacoEditor

作为

NewWindow

组件中的子组件是行不通的。也不在不同窗口中使用 创建函数 和

domElement

。

此操作会失败，因为 Monaco 编辑器代码使用

instanceof HTMLElement

检查，该检查仅在编辑器应呈现的容器位于同一窗口中时才有效。

instanceof HTMLElement

在不同窗口之间失败，因为这些窗口具有不同的环境和自己的全局变量，即不同的

HTMLElement

。因此，除非 Monaco 编辑器经过改进以允许在另一个窗口中渲染（如 this 或 this），唯一的选择是在其自己的页面中触发编辑器创建并在弹出窗口中加载页面（如 Monaco 编辑器 iFrame 示例） ）。