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