Может ли Ace Editor поддерживать несколько редакторов кода на одной странице?

Я ищу, чтобы реализовать веб-приложение, которое имеет интерфейс в стиле"кодирование-конкуренция" с 2 различными редакторами кода на одном экране. Один будет только для чтения, а другой будет активным и позволит пользователю редактировать.

в настоящее время я использую Ace Editor, и я нахожу его удивительным и простым в использовании.

однако, вот мой вопрос. кажется, я получаю ошибку при попытке реализовать 2 разных редактора на одной странице.

Uncaught RangeError: максимальный размер стека вызовов превышен

является ли переменная "редактор" в сценарии js ограниченным словом или не имеет значения, какое имя переменной используется?

вот мой код в моем 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';
}

вот мой код для 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>

заранее спасибо за ответы!

9
ace-editor code-editor javascript jquery

4 ответов

Ace может поддерживать любое количество редакция. Проблема в недавнем регрессия, который разбивает resize для редакторов с height=0 посмотреть демо

8

то, что я сделал, вместо того, чтобы использовать редактор id, я установил его как код класса so Затем я просто перебрал все редакторы.

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

Да он может поддерживать. Посмотрите на мой пример 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(); 
        }
        });
});
6

этот метод может сделать редактор ulimited ace:

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

демо: Неограниченные Редакторы Ace

0