Monaco编辑器使用记录

根据行数控制窗口高度

  1. 首先禁用额外滚动区,在创建编辑器时指定如下属性
scrollBeyondLastLine: false,
  1. 获取内容行数。初始化时可以根据\r算出,动态内容通过editor接口获取
editor.getModel().getLineCount()
  1. 获取每行高度
editor.getOption(monaco.editor.EditorOption.lineHeight);
  1. 修改editor DOM容器高度,然后刷新editor布局
editor.style.height = lineCount * lineHeight +'px';
editor.layout();

至此就完成了编辑器高度动态变化的设定

动态调整编辑器窗口高度

  1. 监听onDidChangeModelContent事件
editor.onDidChangeModelContent(...)

注意,事件会在任何内容变更时出发(不一定是换行),所以可以记录行数进行优化,防止频繁调用

  1. 在事件内根据内容行数调整窗口(上节内容)

附录

  1. monaco create/updateOptions可用参数查看
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容