是否可以使用 ace.js 或 ace.c9.io 添加多个编辑器

Question

我似乎无法添加多个编辑器 div，那么有什么方法可以添加三个吗？ 但是，“ace.js”和“ace.c9.io”只能让一个div成为id的editor div，那么有没有办法在一个页面中拥有多个editor div呢？

Answer 1

这是绝对可能的。 请看一步一步的建议。

首先：指定CSS来装饰或定位所有（例如：3）编辑器 ID。

*[id^='editor-'] {
      position: relative;
      width: 900%;
      height: 350px;
    }

第二：在HTML中，以某种方式循环（或硬编码）以创建编辑器的DIV （例如 3）。

<div id="editor-1">
   //JS code block for editor 1
</div>

<div id="editor-2">
   //JS code block for editor 2
</div>

<div id="editor-3">
   //JS code block for editor 3
</div>

第三：在JS中，如果你事先知道需要多少，循环或硬编码

var howManyEditor = 3; /* for example */
for (var i = 1; i < howManyEditor; i++) {
    var editor = 'editor-' + i;

    var editor = ace.edit(editor);
    editor.setTheme("ace/theme/github");
    editor.session.setMode("ace/mode/javascript");
}

请记住 CSS、HTML 和 JS 应该指向每个编辑器 - 无论您在单个上使用多少个。