所以...这很奇怪吗？!当我尝试在以下上下文中使用 google chrome 中的 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 开发工具来检查发生了什么，然后突然它就可以工作了!
所以我重新加载它，重复这些步骤，而不打开开发工具，然后等待... 但什么也没发生!我不知道从哪里开始，代码对我来说看起来不错，但我确信这只是我犯的一个愚蠢的错误，对吗？
提前致谢
最佳答案
当改变编辑器容器元素的位置或显示时，需要调用Editor.resize()，让编辑器适应大小的变化。
它在打开 chrome devtools 时起作用，因为窗口大小发生变化，并且调用 resize() 方法。
以下应该有效:
$(".preview").dblclick(function(){
$("#code").fadeIn();
Editor.resize();
})
关于javascript - 如果没有 chrome devtools，ace 编辑器不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36111826/