页面上没有预设元素的多个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使用该新元素。