如何基于textarea的rows属性设置CodeMirror 6高度并支持用户调整？

一、基于textarea的rows属性设置编辑器初始尺寸 #

要让CodeMirror继承原textarea的rows属性定义的尺寸，可按以下步骤实现：

1. 提取rows属性值：获取隐藏的textarea元素，读取它的rows属性值。
2. 计算准确高度：利用浏览器计算的textarea行高，结合rows值算出初始高度（需预留编辑器边框、内边距的额外空间）。
3. 初始化时配置高度：在CodeMirror初始化参数中设置高度，或让编辑器自动填充容器高度。

代码示例 #

// 获取目标textarea元素
const textarea = document.querySelector('textarea[data-code-editor="javascript"]');
const rowCount = parseInt(textarea.getAttribute('rows'), 10);

// 获取textarea的默认行高（避免硬编码行高值）
const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
// 计算初始高度：行数×行高 + 编辑器边框/内边距预留空间
const initialHeight = rowCount * lineHeight + 12;

// 初始化CodeMirror编辑器
const editor = CodeMirror(document.querySelector('.code-editor-container'), {
  value: textarea.value,
  mode: textarea.getAttribute('data-code-editor'),
  lineNumbers: true,
  // 设置初始高度
  height: `${initialHeight}px`
});

二、保留用户可调整大小功能 #

要让用户能像原生textarea一样调整编辑器大小，只需给容器添加CSS的resize属性，并确保编辑器自动适配容器尺寸：

1. CSS配置 #

.code-editor-container {
  resize: vertical; /* 仅允许垂直调整，和原生textarea行为一致 */
  overflow: auto;
  min-height: 100px; /* 设置最小高度防止缩得过小 */
  border: 1px solid #ccc; /* 可选：添加边框让用户直观识别可调整区域 */
}

/* 让CodeMirror编辑器占满容器高度 */
.CodeMirror {
  height: 100% !important;
}

2. 可选：兼容旧环境的尺寸监听 #

如果需要兼容不支持ResizeObserver的浏览器，可以手动监听resize事件：

const container = document.querySelector('.code-editor-container');
let resizeTimer;

window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    editor.setSize(null, container.offsetHeight + 'px');
  }, 100);
});

这样设置后，编辑器会继承原textarea的rows定义尺寸，同时用户可以拖动右下角调整高度，体验和原生textarea完全一致。

内容的提问来源于stack exchange，提问作者Vladimír Mlážovský