如何在 shadow root 中使用 Ace 编辑器？

Question

我正在尝试将Ace 编辑器嵌入到我的 Flutter Web 项目中。 我已经用这个 package编写了 Flutter Interop JS。 我的问题是 Ace 编辑器需要 HTML 元素来放置它。 根据 Ace API Reference，我必须使用 HTML 元素 ID 或 DOMElement 本身调用 Ace edit方法来提供它。

我在 Flutter Web 中创建DivElement并使用HtmlElementView显示它。 但是 Flutter 将我的元素放在影子根中，所以我不能直接用它的 id 调用它。 然后我用我的DivElement object 调用Ace.edit方法，我在页面上看到了 Ace 编辑器。 但是编辑器无法显示文本、使用它和创建选择。 它只是一个带有行号的空编辑器。 例子在这里。

空的 Ace 编辑器的屏幕截图

我还使用 JavaScript 在没有 Flutter 的情况下重现了这个错误。示例在这里。

我正在寻找一种在 shadow root 中使用 Ace 编辑器的方法，或者寻找一种不使用 shadow root 将 HTML 元素放置在 Flutter Web 中的方法。

<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>

Answer 1

创建编辑器后，将渲染器附加到影子根。

editor.renderer.attachToShadowRoot();

如何在 shadow root 中使用 Ace 编辑器？

问题描述

1 个解决方案

解决方案1
0 2021-08-19 10:08:34

如何在 shadow root 中使用 Ace 编辑器？

问题描述

1 个解决方案

解决方案1 0 2021-08-19 10:08:34

解决方案1
0 2021-08-19 10:08:34