一个页面上有多个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来挂钩，那么有没有办法在我的HTML位置创建ace编辑器，而不需要对编辑器进行硬编码？也许可以添加一个新的点然后使用它？

Answer 1

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

JS:

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

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