ace editor zeigt nicht ohne chrome dev tools

Also ... das ist komisch ?! wenn ich versuche, und einen ACE-Editor in Google Chrome im folgenden Kontext verwenden:ace editor zeigt nicht ohne chrome dev tools

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

so wie jede vernünftige Person, die ich zu Chrom dev Werkzeugen gehen zu überprüfen, was los ist und dann plötzlich funktioniert es!

so ich es wieder laden die Schritte wiederholen, ohne Devtools zu öffnen und dann warten ... aber nichts passiert! Und ich weiß nicht, wo ich den Code starten soll, sieht gut aus für mich, aber ich bin mir sicher, dass es nur ein dummer Fehler ist, den ich gemacht habe, oder?

Vielen Dank im Voraus

Quelle

2016-03-20 Blazing Code

Sie sollten Position ändern: fixed; positionieren: absolut; in meiner # Code-Klasse –

Ich habe zwei Ebenen auf meiner Seite, so denke ich, es könnte die Positionierung der zweiten Schicht auswirken, so dass ich nicht sicher bin, ob das funktionieren würde, auch Entschuldigung für die späte Antwort arbeitete an dem Projekt so viel ich vergessen, mein Konto zu überprüfen –

Sie müssen Editor.resize() aufrufen, wenn die Position oder die Anzeige des Editors Containerelement ändern, der Editor, damit die Größenänderungen anzupassen.

Es funktioniert beim Öffnen von Chrome Devtools, weil die Fenstergröße sich ändert und die resize() -Methode aufgerufen wird.

Folgendes sollte funktionieren:

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

Quelle

2016-03-20 10:58:53

danke ein Haufen! Entschuldigung, ich bin nicht früher zu dir zurück gekommen –

ace editor zeigt nicht ohne chrome dev tools

Antwort

Verwandte Themen