javascript - 页面上多个 Ace 编辑器，无需预设元素

Question

我正在尝试将 Ace 编辑器集成到我的应用程序中，并且我想要有多个选项卡。然而，我让它发挥作用的唯一方法是提前定义元素。例如:

HTML:

<div id='editors'>
  <div id='editor1'></div>
  <div id='editor2'></div>
</div>

然后是 Javascript:

var editor1 = ace.edit('editor1');
var editor2 = ace.edit('editor2');

当我尝试简单地将编辑器放置在容器内时，它每次都会替换旧编辑器以及我之前添加的任何元素。由于 ace 编辑器需要一些元素/元素 ID 来 Hook ，是否有某种方法可以创建 ace 编辑器，而无需在我的 HTML 位置进行硬编码以供编辑器使用？也许是添加一个新位置然后使用它之类的东西？

Answer 1

所以在问这个问题后我确切地意识到我需要做什么。就像动态附加一个元素然后将其用作新 ace 编辑器的容器一样简单。

JS:

 editor.id = 'editor' + id;
 $('#editors').append('<div class="editor active" id="'+ editor.id + '"></div>');

然后使用动态创建的 id 告诉 ace 使用该新元素。