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

【问题标题】：is it possible to add multiple editor with ace.js or ace.c9.io是否可以使用 ace.js 或 ace.c9.io 添加多个编辑器
【发布时间】：2021-08-25 02:42:34
【问题描述】：

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

【问题讨论】：

标签： javascript html web editor ace-editor

【解决方案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 应该指向每个编辑器 - 无论您在单个编辑器上使用多少个。

【讨论】：