跳转到内容

Editor 高度模式

编辑器通过四个配置项控制编辑区尺寸与滚动:自适应、定高、最大高度与拖拽调节。

高度模式 演示
配置项类型默认值说明
heightnumber | 'auto' | string'auto''auto' 随内容伸缩;给定值时定高并内部滚动,number 视为 px
minHeightnumber | string—最小高度,内容撑开时保底
maxHeightnumber | string—最大高度,内容撑到上限后内部滚动
resizablebooleanfalse启用右下角拖拽手柄,受 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 钳制。