Can Ace Editor support multiple code editors on one page?

Question

I am looking to implement a web application that has a coding-competition interface with two different code editors on the same screen. One will be read-only, and the other will be active and allow the user to edit.

I am currently using Ace Editor, and I find it just cool and easy to use.

However, here is my question. It seems that I am getting an error when trying to implement 2 different editors on the same page.

Uncaught RangeError: maximum call stack size

Is the "editor" variable in js script a limited word or does it not matter which variable name is used?

Here is 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'; } 

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

Thanks for answers!

Answer 1

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

Answer 2

What I did, instead of using the id editor, I set it as a class, so the code Then I just repeated each editor.

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

Answer 3

Yes, he can support. Take a look at my example 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

This method can make a limited font 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> 

Demo: Ace Unlimited Editors