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!