没有Chrome开发工具，王牌编辑器就不会显示

ace editor dosen't show without chrome dev tools

本文关键字：显示 编辑器 王牌 Chrome 开发工具 没有      更新时间：2023-09-26

所以... 这很奇怪？！ 当我尝试在以下上下文中使用谷歌浏览器中的 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，然后等待......但什么也没发生！而且我不知道从哪里开始代码对我来说看起来不错，但我确定这只是我犯的一个愚蠢的错误，对吧？

提前致谢

在更改编辑器容器元素的位置或显示时，您需要调用 Editor.resize（），以允许编辑器适应大小变化。

它在打开 chrome devtools 时有效，因为窗口大小会发生变化，并且会调用 resize（） 方法。

以下方法应该有效：

         $(".preview").dblclick(function(){
             $("#code").fadeIn();
             Editor.resize();
         })
相关文章：