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

标签 javascript jquery css ace-editor

我需要能够在用户将代码放入其中后更改我的 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>

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

最佳答案

改变宽度后,需要调用editor.resize()

关于javascript - ace 编辑器宽度更改会丢失内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62019168/

相关文章:

javascript - 无法使用 setTimout 在小书签中不起作用

javascript - PHP 中的自动建议搜索结果错误

javascript - 使用javascript解析xml

javascript - 从javascript中的另一个函数调用变量

javascript - 如果隐藏所有子 Div,如何隐藏父 DIV(显示 :none)

c# - 从 c# 后面的代码编写页面加载 javascript 函数

javascript - 向 html 元素追加/添加自定义数据(隐藏)?

javascript - 如果选择了两个 Select2 选择则显示警报

html - 对 Bootstrap 非响应式网格系统感到困惑

动画运行时 CSS 动画出现在顶部