Javascript Ace web编辑器不可见

当我尝试使用“编辑器”以外的id加载ace编辑器时，编辑器将不会显示

<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>

{{HTML:：script（'js/ace builds/src noconflict/ace.js'）}
变量编辑器=ace.edit（“编辑器fr”）；
编辑：setTheme（“ace/theme/monokai”）；
editor.getSession（）.setMode（“ace/mode/html”）；

在下面的代码中，如果我将id更改为editor，一切都会正常工作。我为什么不使用id编辑器是因为我的页面中需要两个编辑器

---

如下设置编辑器的宽度和高度：

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

---

您是否检查了CSS以验证是否为div“editor fr”设置了高度？请记住-没有指定的高度，ACE编辑器将不会显示。可能是您将#editor设置为高度，而不是#editor-fr。根据ACE文档，您还可以使用

#editor-fr{position:absolute；top:0；right:0；bottom:0；left:0；}