Kann der Ace Editor mehrere Code-Editoren auf einer Seite unterstützen?

Question

Ich bin auf der Suche nach einer Web-App, die "coding-Wettbewerb" -Styled-Schnittstelle mit 2 verschiedenen Code-Editoren in einem einzigen Bildschirm zu implementieren. Einer wird nur gelesen und der andere ist aktiv und würde dem Benutzer erlauben, zu editieren.

Ich benutze gerade Ace Editor und ich finde es fantastisch und einfach zu bedienen.

Allerdings ist hier meine Frage. Ich habe anscheinend einen Fehler beim Versuch, 2 verschiedene Editoren auf einer einzelnen Seite zu implementieren.

Uncaught RangeError: Maximum call stack size exceeded

Ist die Variable „Editor“ im js Skript ein eingeschränkten Wort oder es spielt keine Rolle, was Variablenname verwendet wird?

Hier ist mein Code in meiner JS-Datei:

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

für die HTML-Datei mein Code hier:

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

Vielen Dank im Voraus für die Antworten!

Answer 1

Ace kann eine beliebige Anzahl von editors unterstützen. Das Problem ist kürzlich regression die resize für die Redaktion mit height=0 bricht sehen this demo

Answer 2

Ja, es unterstützen kann. Schauen Sie sich mein Beispiel 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

Was ich tat, war stattdessen die ID-Editor verwenden ich es als eine Klasse gesetzt, so Code Dann einfach jeden Editor iteriert ich.

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

Answer 4

Diese Methode kann ulimited ace Editor machen:

<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