Czy edytor Ace obsługuje wiele edytorów kodu na jednej stronie?

Question

Chciałbym zaimplementować aplikację internetową z interfejsem "kodowanie-konkurencja" z 2 różnymi edytorami kodu na jednym ekranie. Jeden będzie tylko do odczytu, a drugi będzie aktywny i pozwoli użytkownikowi na edycję.

Używam obecnie edytora Ace i uważam, że jest niesamowity i prosty w użyciu.

Jednak tutaj jest moje pytanie. Wydaje się, że pojawia się błąd przy próbie wdrożenia 2 różnych edytorów na jednej stronie.

Uncaught RangeError: Maximum call stack size exceeded

Czy zmienna „redaktor” w skrypcie js ograniczonym lub słowo to nie ma znaczenia, co zmienna nazwa jest używana?

Oto mój kod w moim pliku 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'; 
} 

Oto mój kod dla pliku 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> 

Dzięki z góry za odpowiedzi!

Answer 1

As może obsługiwać dowolną liczbę editors. Problemem jest niedawne regression który łamie resize dla redaktorów z height=0 zobaczyć this demo

Answer 2

Tak może obsługiwać. Spójrz na moim przykładzie 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

co zrobiłem było zamiast przy użyciu edytora id ustawić go jako klasa więc kod Potem po prostu powtórzyć każdy edytor.

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

Answer 4

Metoda ta może ulimited asa edytora:

<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