Can Ace Editor supporta più editor di codice in una sola pagina?

Question

Sto cercando di implementare un'app Web con un'interfaccia in stile "coding-competition" con 2 editor di codice diversi in un'unica schermata. Uno sarà di sola lettura e l'altro sarà attivo e consentirebbe all'utente di modificare.

Attualmente sto usando Ace Editor e lo trovo fantastico e semplice da usare.

Tuttavia, ecco la mia domanda. Sembra che si stia verificando un errore nel tentativo di implementare 2 editor diversi in una singola pagina.

Uncaught RangeError: Maximum call stack size exceeded

è la variabile "Editor" nello script js una parola ristretta o non importa che cosa viene utilizzato il nome della variabile?

Ecco il mio codice nel mio file JS:

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

Ecco il mio codice per il file HTML:

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

Grazie in anticipo per le risposte!

Answer 1

Ace può supportare qualsiasi numero di editors. Il problema è recente regression che rompe resize per i redattori con height=0 vedere this demo

Answer 2

Si può supportare. Guardate il mio esempio 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 3

Quello che ho fatto è stato invece di utilizzare l'editor id ho impostato come una classe in modo codice Poi ho iterato ogni editore.

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

Answer 4

Questo metodo può fare editor di ace ulimited:

<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