Ace编辑器能否支持在同一页中使用多个代码编辑器？

Question

我想要实现一个Web应用程序，它具有“编码竞赛”风格的界面，并在单个屏幕上使用两个不同的代码编辑器，其中一个是只读的，另一个是活动的，允许用户进行编辑。

我目前正在使用Ace Editor，我觉得它很棒，而且使用起来很简单。

然而，这里是我的问题：当我试图在单个页面中实现2个不同的编辑器时，似乎会出现错误。

Uncaught RangeError: Maximum call stack size exceeded

在JS脚本中，变量“editor”是受限制的单词还是无所谓使用什么变量名称？

这是我在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>

提前感谢回复！

- kenwjj

---

也许你可以考虑将这2个编辑器放在不同的iframe中？ - techfoobar

Answer 1

我所做的是，我将id编辑器改为类(class)，因此代码变成了： 然后我只需要对每个编辑器进行迭代。

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

- acrogenesis

---

这里提供了原始版本，以节省大家的时间 <3 - Zach Saucier

Answer 2

Ace可以支持任意数量的编辑器（链接1）。问题在于最近出现了回归，它会破坏高度为0的编辑器的resize功能，请查看此演示。

- a user

---

非常感谢！我不知道CSS属性会导致这种情况。谢谢！ - kenwjj

Answer 3

是的，它可以支持。看看我的例子： 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(); 
        }
        });
});

- Igor S.

---

这是一个精简版本的代码，供参考。 - Philippe-André Lorin

Answer 4

这个方法可以创建无限的 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编辑器

- Aghaie

---

为什么你需要使用eval()？如果没有它，这个问题会更简洁。 - Genhis

你的JS问题在于...我不知道它在做什么。看起来你有一个好主意，但可读性为-10 - 将JS作为文本包装，然后进行评估。你在这里错过的是将每个编辑器存储在数组中，而数组应该是编辑器编号的索引号。这样，如果需要，您可以稍后获取正确的编辑器。只需考虑可读性方面。我写这个评论只是为了谈论这个问题，因为它刺眼。 - Piotr Kula