aceエディタはクロム開発ツールなしで表示されません

これは奇妙ですか？私は試してみて、次のコンテキストでのGoogle ChromeのACEエディタを使用する場合：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>

ので、まともな人のように、私が起こっていただきましチェックするためにクロムのdevのツールに移動し、その後、突然、それは働きます！

私はdevtoolsを開かずに手順を繰り返してから、待ってから... 何も起こりません！コードをどこから始めるのか分かりませんが、私が作ったばかばかしいエラーですよね？

おかげで、事前

出典

2016-03-20 Blazing Code

あなたが位置を変更する必要があります。固定します。ポジションへ：絶対;あなたの#codeクラスで –

私は私のページに2つのレイヤーがあるので、私はそれが遅く応答して申し訳ありませんが、私はあまりにも多くのプロジェクトに取り組んでいた、うまくいくかどうかわからないので、私のアカウントをチェックするのを忘れた –

には、エディタのコンテナ要素の位置や表示を変更する場合、（）Editor.resizeを呼び出すためにエディタがサイズ変更に適応できるようにする必要があります。

これは、ウィンドウのサイズが変更され、resize（）メソッドを呼び出すため、chrome devtoolsを開くときに機能します。

次のように動作するはずです：

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

出典

2016-03-20 10:58:53

ありがとう、一束！すみません、私は早く戻ってきませんでした –

aceエディタはクロム開発ツールなしで表示されません

答えて

関連する問題