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 oth

Answer 1

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

Answer 2

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

Answer 3

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

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