ace 编辑器宽度更改会丢失内容

Question

我需要能够在用户将代码放入ace编辑器后更改其宽度。但是，当我更改按住编辑器的div的宽度时，文本不会将自己换行到较薄的宽度中，您只是无法再看到它（请参阅 https://jsfiddle.net/0d4whvsq/1/)

var editor = ace.edit("ace_editor_div");

editor.getSession().setUseWorker(false);

editor.setOptions({

    maxLines: 50,

    minLines: 30,

    tabSize:2,

    wrap:true,

});

//editor.$blockScrolling = Infinity;

editor.setValue("this is meant to be too much text for the width of the editor once the width is made smaller.")

$("#shrink_button").on("click",function(){

    $("#ace_editor_div").css("width","200px");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>

<script

  src="https://code.jquery.com/jquery-3.5.1.min.js"

  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

  crossorigin="anonymous"></script>

<button id="shrink_button">

shrink</button>

</button>

<div id="ace_editor_div"></div>

展开代码段

从上面的例子中可以看出，我在缩小编辑器时丢失了很多文本！我看不到任何与宽度相关的基本设置来解决这个问题，我是否缺少一种简单的方法来在调整大小后将所有文本保留在编辑器中？我目前正在想，我可以在调整大小后重新创建整个编辑器，但这显然不理想。

Answer 1

更改宽度后，您需要调用editor.resize()