Editor 高度模式
编辑器通过四个配置项控制编辑区尺寸与滚动:自适应、定高、最大高度与拖拽调节。
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
height | number | 'auto' | string | 'auto' | 'auto' 随内容伸缩;给定值时定高并内部滚动,number 视为 px |
minHeight | number | string | — | 最小高度,内容撑开时保底 |
maxHeight | number | string | — | 最大高度,内容撑到上限后内部滚动 |
resizable | boolean | false | 启用右下角拖拽手柄,受 minHeight / maxHeight 约束 |
minHeight / maxHeight / height 的字符串值支持任意 CSS 长度单位。
import { createEditor } from '@easyx/editor';
// 自动高度:随内容伸缩(默认)const auto = createEditor(el, {});
// 定高 320px:内容超出后内部滚动,可拖拽调节const fixed = createEditor(el, { height: 320, resizable: true });
// 最大高度 380px:先自然伸缩,到上限后内部滚动const bounded = createEditor(el, { maxHeight: 380 });
// 任意 CSS 长度const viewport = createEditor(el, { maxHeight: '50vh' });- 自动高度:编辑区随内容自然伸缩,不出现内部滚动条,适合嵌入式轻量场景。
- 定高:编辑区锁定高度,内容超出后内部滚动,顶部工具栏保持固定。
- 最大高度:内容先自然伸缩,达到上限后内部滚动,避免占满整页。
- 可拖拽:底边出现拖拽手柄;鼠标拖动,或聚焦后按上下方向键(步进 10px)调节,并受
minHeight/maxHeight钳制。