Javascript 如何使用Ace编辑器创建自定义HTML元素？
我正在尝试使用包含Ace编辑器实例的Web组件创建自定义HTML元素。我尝试的解决方案如下Javascript 如何使用Ace编辑器创建自定义HTML元素？,javascript,html,web-component,ace-editor,custom-element,Javascript,Html,Web Component,Ace Editor,Custom Element,我正在尝试使用包含Ace编辑器实例的Web组件创建自定义HTML元素。我尝试的解决方案如下 customElements.define("test-editor", class extends HTMLElement { constructor() { super(); const editorContainer = document.createElement("div");
customElements.define("test-editor", class extends HTMLElement {
constructor() {
super();
const editorContainer = document.createElement("div");
editorContainer.setAttribute("id", "editor_container");
const root = this.attachShadow({mode: "open"});
root.appendChild(editorContainer);
}
connectedCallback() {
ace.edit("editor_container");
}
});
html，正文，#编辑器#容器{
宽度：100%；
身高：100%；
}
在Object.t.edit（ace.js:1）
在HTMLElement.connectedCallback（custom_element.js:17）上
在custom_element.js:3
是否有任何方法可以将Ace Editor的实例嵌入到自定义元素中？您已将shadowDOM附加到组件中 因为ACE编辑器代码加载在页面DOM（绿色）中，
它只能在页面DOM（绿色）中找到ACE容器 注意：您在pageDOM中也有
shadowDOM的全部本质是封装 见： 有两个选项可使ACE编辑器在自定义元素中工作：
- 使用shadowDOM，确实需要大量脚本。但是您可以在一个页面中获得多个编辑器。见：
- 不使用阴影域
（当我们进行此操作时，让元素加载所有依赖项）：
define（“我的编辑器”，类扩展了HtmleElement{
connectedCallback（）{
常量脚本=document.createElement（“脚本”）；
script.src=“//cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js”；
script.onload=（）=>{
this.innerHTML=`${myEditor.innerHTML}`；
ace.edit（“编辑器容器”{
模式：“ace/mode/javascript”，
主题：“ace/主题/钴”
});
}
document.head.append（脚本）；
}
});
html，
身体，
#编辑器容器{
宽度：100%；
身高：100%；
}
它只能在页面DOM（绿色）中找到ACE容器 注意：您在pageDOM中也有
shadowDOM的全部本质是封装 见： 有两个选项可使ACE编辑器在自定义元素中工作：
- 使用shadowDOM，确实需要大量脚本。但是您可以在一个页面中获得多个编辑器。见：
- 不使用阴影域
（当我们进行此操作时，让元素加载所有依赖项）：
define（“我的编辑器”，类扩展了HtmleElement{
connectedCallback（）{
常量脚本=document.createElement（“脚本”）；
script.src=“//cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js”；
script.onload=（）=>{
this.innerHTML=`${myEditor.innerHTML}`；
ace.edit（“编辑器容器”{
模式：“ace/mode/javascript”，
主题：“ace/主题/钴”
});
}
document.head.append（脚本）；
}
});
html，
身体，
#编辑器容器{
宽度：100%；
身高：100%；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body, #editor_container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<test-editor></test-editor>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="custom_element.js"></script>
</body>
</html>