Monaco Editor 强制调整大小编辑器答案

【问题标题】：Monaco Editor force resize editorMonaco Editor 强制调整大小编辑器
【发布时间】：2020-05-14 18:09:17
【问题描述】：

我的完整代码太长，无法在此处发布，但这是我的设置：

automaticLayout: true,
folding: false,
theme: 'vs-dark',
lineNumbers: 'off',
minimap: {
    enabled: false
}

问题

如何强制调整可以从我的脚本触发的大小？

实际发生的情况是每次窗口更改时都会输出控制台消息，而不是摩纳哥高度。

window.onresize = () => {
  console.log('Window resize');
  editor.layout();
});

我先放大，然后通过使开发者控制台变大/变小来降低高度。

【问题讨论】：

【解决方案1】：

我发现 min-height 效果很好：

height:100%
width:100%
min-height:100%
min-width:100%

【讨论】：

【解决方案2】：

我们也解决了这个问题。答案是让布局带一个空对象而不是不带参数，所以resize函数就变成了

window.onresize = () => {
  console.log('Window resize');
  editor.layout({});
});

请注意，打字稿不喜欢这样，因为对象显然应该包含宽度和高度。

window.onresize = () => {
  console.log('Window resize');
  editor.layout({} as monaco.editor.IDimension);
});

解决了这个问题。

【讨论】：

注意：window.onresize 仅在调整整个浏览器窗口大小时调用。因此，当您移动时，这将无济于事。编辑器实例和其他内容之间的拆分器。
是的，我们发现了相同的。我们的实际解决方案非常复杂，我不确定我会推荐它。我们使用 react-resize 钩子检测调整大小，然后使 Monaco 编辑器宽 300 像素（小于我们的最小值）直到调整大小完成，然后使用 editor.layout 恢复到新大小。该问题是由摩纳哥内部使用固定像素大小引起的，因此大小只能在调整大小时增加。

【解决方案3】：

我能否建议您使用工具栏中的 Stack Overflow sn-p/insert code 按钮发布完整代码以提供更多上下文。

当窗口调整大小时，我会做类似的事情来帮助重绘和调整大小，并使用 .layout() 函数没有任何问题。

由于“编辑器”可能为空或在此窗口调整大小功能的范围内无法广泛使用，请查看代码

【讨论】：

出于多种原因，我现在已从 Monaco 更改为 Codemirror。解决这样的问题要简单一些。它也快得多，可能是因为 Monaco 的大小只有几兆字节，而 Codemirror 的大小只有几千字节。对于特定问题，我在 Codemirror 包装器上设置了一个由 calc 计算的高度，类似于calc((100vh - 3rem - 1rem - 1rem) / 2);。