monaco-editor布局篇-自适应大小

1,392 阅读1分钟

编辑器的宽高怎么进行自适应?

在create编辑时,通过配置 automaticLayout 实现编辑器大小自适应:

   monaco.editor.create(editorRef.value, {
       value: '',
       language: "javascript",
       fixedOverflowWidgets: true,
       fontFamily: "Arial",
       fontSize: 14,
       readOnly: true,
       tabSize: 8,
       insertSpaces: true,
       wordWrap: 'on',
       wordWrapColumn: 120,
       // 默认值为false
       automaticLayout: true,
   });

需要注意的是!!!

这个属性设置设置为 true ,则编辑器会在窗口大小发生变化时自动调整大小以适应新的窗口大小。 所以需要注意的是,如果有类似于侧边栏菜单关闭和展开的逻辑,一定要保证编辑器的父容器盒子能够自使用宽度变化,否则无法触发编辑器的自适应

更多示例请参考中文文档:monaco-editor 中文文档