is it possible to add multiple editor with ace.js or ace.c9.io

user_15222902 0
Viewed 93

I can't seem to add more than one editor div, so is there any way to add three? However, "ace.js" and "ace.c9.io" only enable one div to be editor div by id, so is there any way to have multiple editor div in a single page?

ace-editor web editor html javascript
1 Answers

It is absolutely possible. Please have a look a step by step suggestion.

First: Specify the CSS to decorate or target all (Eg: 3) the editors IDs.

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

Second: In the HTML, somehow loop through (or hardcode) to create your editor's DIV (3 for example).

<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>

Third: In the JS, loop through or hardcode if you know how many you need in advance

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");
}

Please do remember CSS, HTML & JS should point to each editor - no matter how many you are using on a single please.

user_20300370
Related