Ace Editor能否在一个页面中支持多个代码编辑器？

我正在寻求在一个屏幕上实现一个网络应用程序，该应用程序具有“编码竞争”的样式界面，其中包含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文件的代码：

在此先感谢您的回复！

Answer 1

Ace可以支持任意数量的编辑器 。 问题是最近的回归 ，它打破了height=0编辑器的resize ，请参阅此演示

Answer 2

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

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

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(); } }); }); 

Answer 4

这个方法可以制作ulimited ace编辑器：

 

  

  

   
 演示： 无限的编辑