Can Ace Editor support multiple code editors in one page?

Question

I'm looking to implement a web app that features "coding-competition"-styled interface with 2 different code editors in a single screen. One will be read only and the other will be active and would allow the user to edit.

I'm currently using Ace Editor and i find it awesome and simple to use.

However, here's my question. I seem to be getting an error upon trying to implement 2 different editors in a single page.

Uncaught RangeError: Maximum call stack size exceeded

Is the variable "editor" in the js script a restricted word or it doesn't matter what variable name is used?

Here's my code in my JS file:

var editorFirst = ace.edit("editorFirst");
var editorSecond= ace.edit("editorSecond");
setupEditor();

function setupEditor() {
    editorFirst.setTheme("ace/theme/eclipse");
    editorFirst.getSession().setMode("ace/mode/javascript");
    editorFirst.setShowPrintMargin(false);
    editorFirst.setHighlightActiveLine(true);
    editorFirst.resize();
    editorFirst.setBehavioursEnabled(true);
    editorFirst.getSession().setUseWrapMode(true);
    document.getElementById('editorFirst').style.fontSize = '14px';

    editorSecond.setTheme("ace/theme/eclipse");
    editorSecond.getSession().setMode("ace/mode/javascript");
    editorSecond.setShowPrintMargin(false);
    editorSecond.setHighlightActiveLine(true);
    editorSecond.resize();
    editorSecond.setBehavioursEnabled(true);
    editorReducer.getSession().setUseWrapMode(true);
    document.getElementById('editorSecond').style.fontSize = '14px';
}

Here's my code for the html file:

<script src="../assets/js/main.js"></script>
<script src="../assets/js/src/ace.js" type="text/javascript" charset="utf-8"></script>
<div id="editorFirst"></div>
<div id="editorSecond"></div>

Thanks in advance for the replies!

Maybe you can consider having the 2 editors in separate iframes? — techfoobar, Mar 27 '13 at 15:19

score 20 · Answer 1 · answered Nov 24 '14 at 21:28

20

What I did was instead of using the id editor I set it as a class so code Then I just iterated every editor.

var editor;
$('.editor').each(function( index ) {
  editor = ace.edit(this);
  editor.getSession().setMode('ace/mode/csharp');
});

answered Nov 24 '14 at 21:28

acrogenesis

937
9
21

[Vanilla version](https://jsfiddle.net/Zeaklous/56grfhs0/) to save you guys time <3 – Zach Saucier Jul 11 '19 at 22:55

score 9 · Accepted Answer · answered Mar 27 '13 at 21:44

9

Ace can support any number of editors. The problem is recent regression which breaks resize for editors with height=0 see this demo

answered Mar 27 '13 at 21:44

a user

23,300
6
58
90

Thank you so much! Didn't know the css properties would cause that. Thanks! – kenwjj Mar 28 '13 at 05:00

score 6 · Answer 3 · answered Jun 06 '13 at 07:42

Yes it can support. Look at my example http://jsfiddle.net/igos/qLAvN/

$(function() {
    var editor1 = ace.edit("editor1");
    editor1.getSession().setMode("ace/mode/java");

    var editor2 = ace.edit("editor2");
    var editor3 = ace.edit("editor3");
    $( "#accordion" ).accordion({
        fillSpace: true,
        change: function() {
            $(editor1).resize(); 
            $(editor2).resize(); 
            $(editor3).resize(); 
        }
        });
});

[Here](http://jsfiddle.net/Philippe_Lorin/9hqf3ct7/) is a stripped-down version, fwiw. — Philippe-André Lorin, Jun 18 '18 at 21:27

Aghaie · Answer 4 · 2017-07-22T07:59:39.673

This method can make ulimited ace editor:

<pre class='editor' data-name='editor_1' id='editor_1'></pre>
<input  name='editor_1' type='hidden' value='' />

<pre class='editor' data-name='editor_2' id='editor_2'></pre>
<input  name='editor_2' type='hidden' value='' />

<pre class='editor' data-name='editor_3' id='editor_3'></pre>
<input  name='editor_3' type='hidden' value='' />


<script type="text/javascript">

$(document).ready(function(){

ace.require("ace/ext/language_tools");
var editor;
var ednum = 0;
ace_config = {
    maxLines: Infinity,
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
};

$('.editor').each(function( index ) {
    ednum++;
    _name = "editor_"+ednum;
    code = "var name = $(this).data('name');"
    +_name+" = ace.edit(this);"
    +_name+".setTheme('ace/theme/chrome');"
    +_name+".getSession().setMode('ace/mode/less');"
    +_name+".setOptions(ace_config);"
    +"var code_"+ednum+" = $('textarea[name='+name+']');"
    +_name+".getSession().setValue($('input[name='+name+']').val());"
    +_name+".getSession().on('change', function(){"
    +"$('input[name='+name+']').val("+_name+".getSession().getValue());"
    +"});";
    eval(code);

});

</script>

Demo: Unlimited Ace Editors

Why do you need `eval()` for this? It would be much cleaner solution without it. — Genhis, Apr 30 '18 at 17:27
The problem with your JS is .. that I have no idea what it is doing. It seems like you got a good idea but readability is -10 - Wrapping JS as text, then eval. What you missed here is storing each editor in an array, an the array should be the index number of the editor number. That way, if you needed to, you can get the correct one later. Just consider the readability aspect. I only wrote this comment to talk about that because it is eye piercing — Piotr Kula, Jul 23 '18 at 08:00

Can Ace Editor support multiple code editors in one page?

4 Answers4

Linked