11

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.

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

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

Uncaught RangeError: Maximum call stack size exceeded

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

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

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>

Thanks in advance for the replies!

Improve this question
1
  • 1
    Maybe you can consider having the 2 editors in separate iframes? Commented Mar 27, 2013 at 15:19

4 Answers 4

Reset to default
20

What I did was instead of using the id editor I set it as a class so code Then I just iterated every editor.

var editor; $('.editor').each(function( index ) { editor = ace.edit(this); editor.getSession().setMode('ace/mode/csharp'); });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Vanilla version to save you guys time <3
9

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

Improve this answer

1 Comment

Thank you so much! Didn't know the css properties would cause that. Thanks!
6

Yes it can support. 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(); } }); });
Improve this answer

1 Comment

Here is a stripped-down version, fwiw.
0

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

Demo: Unlimited Ace Editors

Improve this answer

2 Comments

Why do you need eval() for this? It would be much cleaner solution without it.
The problem with your JS is .. that I have no idea what it is doing. It seems like you got a good idea but readability is -10 - Wrapping JS as text, then eval. What you missed here is storing each editor in an array, an the array should be the index number of the editor number. That way, if you needed to, you can get the correct one later. Just consider the readability aspect. I only wrote this comment to talk about that because it is eye piercing

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.