如何让monaco-editor实现类似CodeMirror的内容自动适配高度功能？

当然可以！Monaco Editor 完全能够实现类似 CodeMirror 的内容高度自动适配效果，核心思路是通过监听编辑器内容变化，动态计算并调整编辑器容器的高度。下面是详细的实现步骤和代码示例：

核心原理 #

Monaco Editor 本身没有内置高度自动适配的功能，但我们可以借助它的 API 实现：

• 监听编辑器的内容变更事件
• 实时计算内容的总行数与对应高度
• 动态设置编辑器容器的高度，并触发布局更新

具体实现代码 #

1. HTML 结构 #

首先准备编辑器容器，设置基础样式（宽度、最小高度）：

<div id="editor-container" style="width: 800px; min-height: 60px; border: 1px solid #eee;"></div>

2. JavaScript 逻辑 #

初始化编辑器并实现高度自动适配：

// 初始化 Monaco Editor
const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'Hello World!\n这是第二行内容\n第三行内容',
  language: 'javascript',
  minimap: { enabled: false }, // 关闭 minimap，避免干扰高度计算
  scrollbar: {
    vertical: 'hidden', // 隐藏垂直滚动条，适配后无需滚动
  },
  lineNumbers: 'on', // 可选，保留行号不影响高度计算
});

// 定义更新编辑器高度的函数
function adjustEditorHeight() {
  const model = editor.getModel();
  if (!model) return;

  // 获取关键参数
  const lineCount = model.getLineCount(); // 内容总行数
  const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight); // 实际行高
  const paddingTop = 12; // 编辑器顶部内边距（可根据主题调整）
  const paddingBottom = 12; // 编辑器底部内边距

  // 计算总高度，同时保留最小高度
  const totalHeight = lineCount * lineHeight + paddingTop + paddingBottom;
  const container = editor.getContainerElement();
  container.style.height = `${Math.max(totalHeight, 60)}px`;

  // 强制编辑器更新布局
  editor.layout();
}

// 初始加载时执行一次高度调整
adjustEditorHeight();

// 监听内容变化事件，实时调整高度
editor.onDidChangeContent(adjustEditorHeight);

// 可选：监听窗口 resize，确保编辑器布局正常
window.addEventListener('resize', () => {
  editor.layout();
});

注意事项 #

• 自定义主题适配：如果使用了自定义主题，行高和内边距可能不同，建议通过 editor.getOption() 方法获取实际配置值，避免硬编码。
• 折叠内容处理：上述代码基于总行数计算高度，如果需要适配代码折叠后的可见高度，可以使用 editor.getVisibleRanges() 来统计可见行数，再进行计算。
• 性能优化：如果编辑器内容频繁变更，可以考虑给高度调整函数添加防抖处理，避免频繁触发布局更新。
• 最小高度设置：一定要设置合理的最小高度，防止内容为空或只有一行时编辑器过于窄小，影响视觉体验。

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