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