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

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

В настоящее время я использую 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>

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


javascript jquery ace-editor code-editor
person kenwjj    schedule 27.03.2013    source источник
comment
Может быть, вы можете рассмотреть возможность размещения двух редакторов в отдельных фреймах?   -  person techfoobar    schedule 27.03.2013

Ответы (4)


arrow_upward
9
arrow_downward

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

person a user    schedule 27.03.2013
comment
Большое спасибо! Не знал, что свойства css вызовут это. Спасибо! - person kenwjj; 28.03.2013

arrow_upward
20
arrow_downward

Что я сделал, так это то, что вместо использования редактора идентификаторов я установил его как класс, поэтому код Затем я просто повторил каждый редактор.

var editor;
$('.editor').each(function( index ) {
  editor = ace.edit(this);
  editor.getSession().setMode('ace/mode/csharp');
});
person acrogenesis    schedule 24.11.2014
comment
Ванильная версия для экономии вашего времени ‹3 - person Zach Saucier; 12.07.2019

arrow_upward
6
arrow_downward

Да может поддерживать. Посмотрите на мой пример 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(); 
        }
        });
});
person Igor S.    schedule 06.06.2013
comment
Вот урезанная версия. - person Philippe-André Lorin; 19.06.2018

arrow_upward
0
arrow_downward

Этот метод может сделать редактор 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

person Aghaie    schedule 22.07.2017
comment
Зачем тебе eval() для этого? Без него было бы гораздо более чистое решение. - person Genhis; 30.04.2018
comment
Проблема с вашим JS в том, что я понятия не имею, что он делает. Кажется, у вас есть хорошая идея, но читабельность -10 - Оборачивать JS как текст, затем eval. Здесь вы пропустили сохранение каждого редактора в массиве, массив должен быть порядковым номером номера редактора. Таким образом, если вам нужно, вы можете получить правильный позже. Просто рассмотрите аспект читабельности. Я написал этот комментарий только для того, чтобы поговорить об этом, потому что это пронзает глаза. - person Piotr Kula; 23.07.2018