Ace Editor能否在一个页面中支持多个代码编辑器？ [英] Can Ace Editor support multiple code editors in one page?

问题描述

我正在寻求在一个屏幕上实现一个网络应用程序，该应用程序具有编码竞争的样式，界面包含2个不同的代码编辑器。一个是只读的，另一个是活动的，允许用户编辑。

I'm looking to implement a web app that features "coding-competition"-styled interface with 2 different code editors in a single screen. One will be read only and the other will be active and would allow the user to edit.

我目前正在使用Ace编辑器，我发现它很棒，使用简单。

I'm currently using Ace Editor and i find it awesome and simple to use.

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

However, here's my question. I seem to be getting an error upon trying to implement 2 different editors in a single page.

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

Uncaught RangeError: Maximum call stack size exceeded

js脚本中的变量editor是受限制的单词还是无关紧要的变量使用名称？

Is the variable "editor" in the js script a restricted word or it doesn't matter what variable name is used?

这是我的JS文件中的代码：

Here's my code in my JS file:

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文件代码：

Here's my code for the html file:

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

预先感谢您的回复！

推荐答案

Ace可以支持任意数量的编辑。
问题是最近的回归打破调整大小对于 height = 0 的编辑，请参阅此演示

Ace can support any number of editors. The problem is recent regression which breaks resize for editors with height=0 see this demo

这篇关于Ace Editor能否在一个页面中支持多个代码编辑器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！