如何在影子根目录中使用 Ace 编辑器？
Posted
技术标签:
【中文标题】如何在影子根目录中使用 Ace 编辑器？【英文标题】：How to use Ace editor in shadow root? 【发布时间】：2021-04-30 01:35:03 【问题描述】：我正在尝试将 Ace editor 嵌入到我的 Flutter Web 项目中。 我已经用this package 编写了 Flutter Interop JS。我的问题是 Ace 编辑器需要放置它的 html 元素。根据 Ace API Reference，我必须使用 HTML 元素 ID 或 DOMElement 本身调用 Ace edit 方法来提供它。
我正在 Flutter Web 中创建 DivElement 并使用 HtmlElementView 显示它。但是 Flutter 将我的元素放在了 shadow root 中，所以我不能直接用它的 id 调用它。然后我用我的 DivElement 对象调用 Ace.edit 方法，我在页面上看到了 Ace 编辑器。但是编辑器无法显示文本、使用它并创建选择。它只是一个带有行号的空编辑器。例如here。
Screenshot of an empty Ace editor
我也没有使用 javascript 的 Flutter 重现了这个错误。例如here。
我正在寻找一种在 shadow root 中使用 Ace 编辑器的方法，或者寻找一种不使用 shadow root 在 Flutter Web 中放置 HTML 元素的方法。
<body>
<script>
let el = document.createElement('div');
const newContent = document.createTextNode("some code\ntwo lines");
el.appendChild(newContent);
el.setAttribute('style', 'width: 500px; height: 500px; background-color: gray');
el.setAttribute('id', 'editor');
customElements.define('flt-platform-view', class extends HTMLElement
connectedCallback()
const shadow = this.attachShadow(mode: 'open');
shadow.appendChild(el);
);
</script>
<flt-platform-view></flt-platform-view>
<script src="ace/ace.js" type="application/javascript"></script>
<script>
let Document = ace.require("ace/document").Document;
let doc = new Document("Lorem ipsum\ntwo lines");
let editor = ace.edit(el);
editor.getSession().setDocument(doc);
</script>
</body>
【问题讨论】：
不要尝试将 Ace 编辑器连接到阴影节点，使用iframe 元素。
【参考方案1】：
创建编辑器后，将渲染器附加到阴影根。
editor.renderer.attachToShadowRoot();
【讨论】：
请尝试通过在代码周围添加 cmets 来扩展答案。以上是关于如何在影子根目录中使用 Ace 编辑器？的主要内容，如果未能解决你的问题，请参考以下文章