ace 编辑器在没有 chrome devtools 的情况下不会显示

Question

所以……这很奇怪？！当我在以下上下文中尝试在 google chrome 中使用 ACE 编辑器时：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style>
         body {
             background-color: rgb(0, 0, 0);
         }

         .preview {
             position: fixed;
             margin: 0 auto;

             width:800px;
             height:600px;

             background-color:#3D3D3D;
         }

         #code {
             width:800px;
             height:600px;      
             position: fixed;
             margin: 0 auto;
         }
    </style>
 </head>
 <body>

     <div class="preview" id="preview_layer_1" style="z-index:0;">
         nothing much yet
     </div>

     <div class="preview" id="preview_layer_2" style="z-index:1; background-color:;">
     </div>

     <div id="code" style="z-index:2;"></div>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js" type="text/javascript" charset="utf-8"></script>
         <script>
         $(document).ready(function(){
             $("#code").hide();

             $(".preview").dblclick(function(){
                 $("#code").fadeIn();
             })

             $("#code").dblclick(function(){
                 $("#code").fadeOut();
             })

         });

         var Editor = ace.edit("code");
         var Haxe = ace.createEditSession("","ace/mode/haxe");
         var JSON = ace.createEditSession("","ace/mode/json");
         Editor.setTheme("ace/theme/monokai");
         Editor.setSession(Haxe);

         Editor.focus();
         </script>

 </body>

所以像任何正常人一样，我去 chrome 开发工具检查发生了什么，然后突然它起作用了！

所以我重新加载它，在不打开 devtools 的情况下重复这些步骤，然后等待... 但什么也没发生！我不知道从哪里开始代码对我来说看起来不错，但我确定这只是我犯的一个愚蠢的错误，对吧？

提前致谢

Answer 1

当编辑器容器元素改变位置或显示时需要调用Editor.resize()，让编辑器适应大小变化。

打开 chrome devtools 时有效，因为 window 大小发生变化，并调用 resize() 方法。

以下应该有效：

         $(".preview").dblclick(function(){
             $("#code").fadeIn();
             Editor.resize();
         })

ace 编辑器在没有 chrome devtools 的情况下不会显示

ace editor dosen't show without chrome dev tools

javascript

google-chrome

ace-editor