2016-03-20 10 views
0

Yani, bu garip mi ?! ben denemek ve aşağıdaki bağlamında google chrome ACE editörü kullanırken:ace editörü, chrome dev araçları olmadan gösterilmiyor

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

böylece krom dev araçlara gitmem herhangi aklı başında bir insan gibi Neler olup bittiğini kontrol etmek ve sonra aniden çalıştığını açıklayan!

yeniden yükledikten sonra devtools'u açmadan adımları tekrarlayın ve bekleyin ... ama hiçbir şey olmaz! ve kodu nereden başlayacağımı bilmiyorum ama eminim ki yaptığım sadece saçma bir hata, değil mi?

Şimdiden teşekkürler

+0

Eğer konumunu değiştirmek gerekir: Sabit; pozisyon: mutlak; # code sınıfınızda –

+0

sayfamda iki katman var, bu yüzden ikinci katmanın konumlandırmasını etkileyebileceğini düşünüyorum, bu yüzden işe yarayıp yaramadığından emin değilim, geç cevap için özür dilerim ki projede çok fazla çalışıyorum hesabımı kontrol etmeyi unuttu –

cevap

1

Sen editör muhafaza elemanının pozisyonunu veya görüntülenmesini değiştirirken,() Editor.resize çağırmak için editör boyutu değişikliklere uyum sağlamak için gereklidir.

Pencere boyutu değiştiği ve resize() yöntemini çağıracağı için chrome devtools'u açıldığında çalışır.

şu çalışmalıdır:

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

teşekkürler bir demet! pardon ben sana daha erken dönmedim –