React版Monaco Editor实现类Windows风格拖拽调整大小方案咨询

核心思路 #

要实现类似系统窗口的拖拽调整大小+下方内容自动下移效果，得靠容器拖拽resize配合编辑器自适应容器来实现。automaticLayout的作用是让编辑器在容器尺寸变化时自动重排，但前提是编辑器的尺寸要设为相对于容器的百分比，才能跟着容器一起变化。

具体实现步骤 #

1. 用可拖拽容器包裹Editor组件
   给容器添加CSS的resize属性（vertical允许垂直拖拽，both则支持宽高同时调整），同时设置overflow: auto（resize仅对非visible的overflow元素生效），并给容器指定初始尺寸。

2. 调整Editor的尺寸配置
   将Editor的width和height改为"100%"，让它完全填充容器，保留automaticLayout: true确保容器尺寸变化时编辑器自动更新布局。

3. （可选）手动触发布局更新
   如果automaticLayout未自动生效，可以在onMount时获取编辑器实例，用ResizeObserver监听容器尺寸变化，手动调用editor.layout()强制更新。

代码示例 #

// 容器样式
const editorContainerStyle = {
  width: '1200px',
  height: '400px',
  resize: 'vertical', // 垂直拖拽调整高度，需调整宽度则改为'both'
  overflow: 'auto',
  border: '1px solid #e0e0e0', // 可选，方便识别拖拽边界
};

// 组件代码
<div style={editorContainerStyle}>
  <Editor
    height="100%"
    width="100%"
    onChange={handleUserQueryChange}
    beforeMount={handleEditorBeforeMount}
    onMount={(editor) => {
      handleEditorDidMount(editor);
      // 可选：手动监听容器尺寸变化
      const container = editor.getDomNode().parentElement;
      const resizeObserver = new ResizeObserver(() => {
        editor.layout();
      });
      resizeObserver.observe(container);
    }}
    options={{
      minimap: { enabled: false },
      scrollBeyondLastLine: false,
      lineNumbers: 'off',
      glyphMargin: false,
      folding: false,
      lineDecorationsWidth: 0,
      lineNumbersMinChars: 0,
      wordWrap: 'off',
      automaticLayout: true
    }}
  />
</div>

关键说明 #

• resize属性仅对块级元素生效，必须给容器设置明确的初始宽高。
• 容器尺寸变化后，只要编辑器宽高设为100%，配合automaticLayout就能自动适配；若自动适配失效，ResizeObserver手动触发editor.layout()是可靠的补充方案。
• 下方内容会自动下移的前提是页面采用正常文档流布局（容器和下方内容均为块级元素）。

内容的提问来源于stack exchange，提问作者r342346