Can Ace Editor support multiple code editors in one page?
ace-editor, code-editor, javascript, jquery
Solution
Ace can support any number of editors. The problem is recent regression which breaks `resize` for editors with `height=0` see this demo
Problem
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!