编辑器文本大小调整问题

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 lise 下方，如下图所示，

为了解决这个问题，

我尝试将 CSS AceEditor 描述更改为

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

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

我该如何解决这个问题？

根据下面的答案，我已经尝试过

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() 让编辑器更新其大小。