Monaco编辑器强制调整编辑器大小。

Question

我使用Monaco编辑器。

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

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

问题

• 当我放大窗口时，Monaco编辑器会按照预期进行调整。
• 但是当我缩小窗口时，Monaco编辑器不会自动调整高度。

问题

如何强制进行一次调整大小，以便我可以从我的脚本中触发？

我尝试过但没有成功的方法

发生的情况是在每个窗口更改时都会输出控制台消息，但不会调整Monaco编辑器的高度。

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

演示

我先放大图像，然后通过调整开发者控制台的大小来减小高度。

- Jens Törnell

---

我认为使用 automaticLayout: true 后，您就不需要再手动处理编辑器的布局了。 - Mike Lischke

Answer 1

我们也曾经面临过这个问题。答案是使布局采用一个空对象而不是没有参数，因此调整大小函数变为：

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

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

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

修复了该问题。

- Greg Reynolds

---

注意：window.onresize仅在整个浏览器窗口调整大小时才会被调用。因此，当您移动编辑器实例和其他内容之间的分隔器时，它将无法帮助您。 - Mike Lischke

是的，我们也发现了同样的问题。我们实际的解决方案非常复杂，我不确定是否推荐使用。我们使用 react-resize hook 检测调整大小，然后将 Monaco 编辑器的宽度设置为 300 像素（小于我们的最小值），直到调整大小完成，然后使用 editor.layout 将其恢复到新的大小。问题是由于 Monaco 在内部使用固定像素大小，因此在调整大小时大小只能增加。 - Greg Reynolds

解决了我的（相同）问题，谢谢！ 我们不应该向 monaco-repo 报告吗？因为这似乎相当违反直觉。 - Shrike

Answer 2

我发现min-height非常有效：

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

- T Laird-McConnell

Answer 3

这似乎是在创建编辑器时使用automaticLayout选项时出现的一个错误。在2023年，使用该选项现在对我来说是有效的，不再需要手动更新布局（就像其他答案中所提到的那样）。

monaco.editor.create(elem, {
  language: 'javascript', // or whatever
  automaticLayout: true,
});

- Jouke van der Maas

Answer 4

我可以建议您使用工具栏中的Stack Overflow片段/插入代码按钮发布完整代码，以便提供更多上下文。

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

由于“editor”可能为空或在此窗口调整大小函数的范围内不可用，因此请查看代码。

- Warren Buckley

---

出于许多原因，我现在已经从Monaco转换到Codemirror。这样处理问题会更简单一些。而且它的速度更快，可能是因为Monaco的大小是几兆字节，而Codemirror只有几千字节。对于特定的问题，我在Codemirror包装器上设置了一个高度，该高度由calc计算得出，类似于calc((100vh - 3rem - 1rem - 1rem) / 2);。 - Jens Törnell