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!

Lubricious

Maybe you can consider having the 2 editors in separate iframes? – Arv

Answer 1

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

Rhodian

Thank you so much! Didn't know the css properties would cause that. Thanks! – Lubricious

Answer 2

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

Dropsical

Vanilla version to save you guys time <3 – Crotch

Answer 3

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

Ultan

Here is a stripped-down version, fwiw. – Aero

Answer 4

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

Sheff

Why do you need eval() for this? It would be much cleaner solution without it. – Materialize

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