Ace web editor not visible

Question

When I try to load ace editor with an id other than 'editor' the editor will not show up

<div style="position:relative;min-height:400px;">
        <div id="editor-fr">
        </div>
</div>

{{ HTML::script('js/ace-builds/src-noconflict/ace.js') }}

<script>
    var editor = ace.edit("editor-fr");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/html");
</script>

In the code below, if I change the id to editor every thing will work fine. Why I not use the id editor is because I need 2 editors in my page

Answer 1

Set width and height of the editor like this:

<div id="editor-fr" style="height: 500px; width: 500px"></div>