Question

所以......这很奇怪？！当我尝试在以下上下文中使用谷歌浏览器中的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 dev工具检查发生了什么然后突然它起作用了！

所以我重新加载它重复步骤而不打开devtools然后等待...... 但没有任何反应！我不知道从哪里开始代码看起来很好，但我确定它只是我做的一个愚蠢的错误，对吧？

提前致谢

Answer 1

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

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

以下内容应该有效：

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

如果没有chrome dev工具，ace编辑器就不会显示

1 个答案: