摩纳哥编辑器强制调整大小编辑器

Question

I use the Monaco Editor .

My full code is too long to be posted here but this is my settings:

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

Problem

• When I enlarge my window, the Monaco Editor follows as intended.
• When I reduce my Window, the Monaco Editor does not resize (height).

Question

How can I force a resize that I can trigger from my script?

What I've tried, that did not work

What did happend was that the console message was output on every window change, but not the Monaco height.

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

Demo

I enlarge first and then reduce the height by making the developer console larger/smaller.

Answer 1

We have grappled with this too. The answer is to make the layout take an empty object rather than no parameter, so the resize function becomes

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

Note that typescript does not like this, as the object apparently should contain both width and height.

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

Fixes that issue.

Answer 2

I found min-height worked great:

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

Answer 3

Can I suggest that you do post the full code using the Stack Overflow snippet/insert code button from the toolbar to give more context.

I do something similar to help redraw & resize when the window is resized and use .layout() function without any problems.

As 'editor' could be null or not be widely available in the scope of this window resize function, it would be good to see the code please