Ace Editor 可以在一页中支持多个代码编辑器吗？

Posted 2023-05-07

【中文标题】Ace Editor 可以在一页中支持多个代码编辑器吗？

【英文标题】：Can Ace Editor support multiple code editors in one page?

【发布时间】：2013-03-17 17:45:27

【问题描述】：

我希望实现一个网络应用程序，该应用程序具有“编码竞赛”风格的界面，在一个屏幕上带有 2 个不同的代码编辑器。一个是只读的，另一个是活动的，允许用户编辑。

我目前正在使用 Ace Editor，我发现它非常棒且易于使用。

但是，这是我的问题。 我在尝试在一个页面中实现 2 个不同的编辑器时似乎遇到了错误。

未捕获的 RangeError：超出最大调用堆栈大小

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>

提前感谢您的回复！

【问题讨论】：

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

【参考方案1】：

我所做的不是使用 id 编辑器，而是将其设置为一个类，所以代码 然后我只是迭代了每个编辑器。

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

【讨论】：

Vanilla version 为你们节省时间

【参考方案2】：

Ace 可以支持任意数量的editors。 问题是最近的regression 打破了resize 对于height=0 的编辑请参阅this demo

【讨论】：

非常感谢！不知道css属性会导致这种情况。谢谢！

【参考方案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(); 
        
        );
);

【讨论】：

Here 是精简版，fwiw。

【参考方案4】：

这个方法可以做ulimited ace editor：

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

演示：Unlimited Ace Editors

【讨论】：

你为什么需要eval()？没有它，这将是更清洁的解决方案。

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