javascript Ace Editor 能否在一页中支持多个代码编辑器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15662337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can Ace Editor support multiple code editors in one page?
提问by kenwjj
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.
我希望实现一个 Web 应用程序，该应用程序具有“编码竞赛”风格的界面，在单个屏幕中具有 2 个不同的代码编辑器。一个将是只读的，另一个将处于活动状态并允许用户进行编辑。
I'm currently using Ace Editor and i find it awesome and simple to use.
我目前正在使用 Ace Editor，我发现它很棒且易于使用。
However, here's my question. I seem to be getting an error upon trying to implement 2 different editors in a single page.
但是，这是我的问题。尝试在单个页面中实现 2 个不同的编辑器时，我似乎遇到了错误。
Uncaught RangeError: Maximum call stack size exceeded
未捕获的 RangeError：超出最大调用堆栈大小
Is the variable "editor" in the js script a restricted word or it doesn't matter what variable name is used?
js 脚本中的变量“editor”是受限词还是使用什么变量名无关紧要？
Here's my code in my JS file:
这是我的 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';
}
Here's my code for the html file:
这是我的 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>
Thanks in advance for the replies!
预先感谢您的回复！
采纳答案by a user
回答by acrogenesis
What I did was instead of using the id editor I set it as a class so code Then I just iterated every editor.
我所做的不是使用 id 编辑器，而是将它设置为一个类，所以我只是迭代每个编辑器。
var editor;
$('.editor').each(function( index ) {
editor = ace.edit(this);
editor.getSession().setMode('ace/mode/csharp');
});
回答by Igor S.
Yes it can support. Look at my example http://jsfiddle.net/igos/qLAvN/
是的，它可以支持。看看我的例子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();
}
});
});
回答by Aghaie
This method can make ulimited ace editor:
这个方法可以使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>
Demo: Unlimited Ace Editors
演示：无限王牌编辑
