javascript - 编辑器文本大小调整问题

Question

我是这样使用 Ace-Editor 的，

<div id="AceEditor"></div>

蓝色区域是我的编辑，

#AceEditor 
{ 
    position: absolute;
    top: 0;
    right: 300px;
    bottom: 420px;
    left: 0px;
    overflow: auto;
}

使用 Javascript，我已将 console log 区域配置为最小化，如下所示，

if($("#button").html() == "Minimize")
{
    $('#AceEditor').css("bottom",420);
}
else
{
    $('#AceEditor').css("bottom",0);
}

$("#button").click(function(){
    if($(this).html() == "Minimize"){
        $(this).html("Maximize");
        $('#AceEditor').css("bottom",0);
    }
    else{
        $(this).html("Minimize");
        $('#AceEditor').css("bottom",420);
    }
    $("#ConsoleDisplay, #ConsoleBar").slideToggle();
});

现在的问题是，当我按下 minimize 时，窗口会最小化，但文本光标不会移动到 420px 下方，如下图所示，

为了解决这个问题，

我尝试将 CSS AceEditor 描述更改为

#AceEditor 
{ 
    position: absolute;
    top: 0;
    right: 300px;
    bottom: 0px;
    left: 0px;
    overflow: auto;
}

现在虽然文本到达了页面底部，但当控制台日志最大化时，文本不会自动调整到新的底部像素

我该如何解决这个问题？

根据下面的答案，我试过了

if($("#button").html() == "Minimize")
{
  $('#AceEditor').css("bottom",420).resize();
}
else
{
  $('#AceEditor').css("bottom",0).resize();
}

也尝试过，

if($("#button").html() == "Minimize")
{
  $('#AceEditor').css("bottom",420);
  $('#AceEditor').resize();
}
else
{
  $('#AceEditor').css("bottom",0).resize();
  $('#AceEditor').resize();
}

但问题依然存在。

Answer 1

更改编辑器大小后，您应该调用editor.resize() 让编辑器更新其大小。