富文本字段放进后台表单后，最常见的问题不是能不能显示，而是编辑区尺寸失控、弹窗布局被撑开、列表页误展示大段内容。表现通常集中在高度不稳定、宽度跟随栅格异常变化、空内容校验失效，排查时很容易把问题混到编辑器本体、表单布局、上传配置几个层面里。
这篇内容围绕 fast-crud + editor-wang5 + dvadmin 这一段富文本字段配置展开，拆开看 content_article 的字段定义、column 与 form 的职责边界、component.style.height 的生效位置，以及参数表在工程维护里的实际落点，重点放在尺寸控制、校验入口、上传适配和配置链路。
文章目录
需求解析
当前材料对应的是后台表单里的 editor-wang5 富文本字段，运行语境已经限定在 fast-crud + editor-wang5 + FsUploaderFormOptions 体系内。使用场景很明确，核心目标不是讲编辑器原理，而是把字段放进 CRUD 表单后，稳定控制编辑区高度、跟随表单栅格控制宽度，并把校验、上传、生命周期这些高频配置项整理成一套可维护的参数说明。
从字段结构看，尺寸控制分成两个层面。宽度不由编辑器单独决定，而是跟随 form.col.span 这类表单栅格配置生效；高度不放在字段顶层，也不放在 editorConfig，而是放在 component.style.height 内部生效。需要注意的是，这一步不能省略，否则会导致编辑器区域高度表现不稳定，尤其在 tab、dialog、抽屉表单里更明显。
上传与回调
编辑器配置
表单承载
字段定义
富文本字段接入
声明富文本字段
指定组件类型
配置列表列属性
设置表单栅格
控制显示状态
绑定校验规则
写入组件标识
设置可视高度
挂载编辑器配置
接入上传能力
解析返回地址
监听内容变化
界面定位材料已经给出，原图链接如下。
这份参数说明表的价值也已经很明确，不是简单罗列可写字段，而是把列表展示、表单布局、校验、编辑器行为、上传系统、生命周期这些配置维度统一放进一个字段模型里，后续维护时不需要反复试错。
功能实现
定位对象是 content_article 字段定义，目的在于把富文本字段完整挂进 CRUD 表单，并把高度、宽度、禁用态、上传器和校验规则放到正确位置。
css
content_article: {
title: '使用教程',
column: {
width: 300,
show: false
},
type: "editor-wang5", // 富文本图片上传依赖file-uploader，请先配置好file-uploader
form: {
col: {span: 12},
// 动态显隐字段
// show: compute(({ form }) => {
// return form.change === "wang";
// }),
rules: [
{required: false, message: "此项必填"},
{
validator: async (rule, value) => {
if (value.trim() === "<p><br></p>") {
throw new Error("内容不能为空");
}
}
}
],
component: {
disabled: compute(({form}) => {
return form.disabled;
}),
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
style: {
height: '430px' // ⭐ 关键点：高度放在这里
},
toolbarConfig: {},
editorConfig: {},
onOnChange(value: any) {
utils.logger.info("value changed", value);
},
uploader: {
type: "form",
buildUrl(res: any) {
return res.url;
}
} as FsUploaderFormOptions
}
}
},关键点在于宽度跟随 form.col.span 与表单容器分配，高度单独写在 component.style.height，否则会导致编辑区尺寸控制失焦。
字段顶层配置承担的是字段元信息、组件类型、值构建和提交转换这几类职责，适合直接整理成统一规范表。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
content_article |
title |
string |
字段显示名称 | 表单 label、详情页标题 |
content_article |
type |
string |
使用的组件类型 | 固定为 editor-wang5 |
content_article |
valueBuilder |
function |
表单值构建函数 | 回显时对内容做前置处理 |
content_article |
valueResolve |
function |
提交前值转换 | 提交前做清洗、裁剪、转码 |
列表列配置只服务于列表页展示，不参与编辑器真正的渲染尺寸控制，column.width 解决的是表格列宽，不是编辑器宽度。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
column |
show |
boolean |
是否在列表中显示 | 富文本一般设为 false |
column |
width |
number |
列宽 | 少量摘要展示 |
column |
align |
string |
对齐方式 | 居中 / 左对齐 |
column |
formatter |
function |
列内容格式化 | 截断富文本、转纯文本 |
column |
ellipsis |
boolean |
超出省略 | 列表简化展示 |
表单级配置负责的是字段是否出现、占几列、默认值、只读态和提示文案，宽度控制落点实际就在这一层。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
form |
show |
`boolean | computed` | 是否显示该字段 |
form |
value |
string |
默认值 | 新建时插入模板 |
form |
readonly |
`boolean | computed` | 只读状态 |
form |
labelWidth |
string |
单字段标签宽度 | 富文本字段对齐 |
form |
helper.text |
string |
字段说明 | 编辑规范提示 |
form.col |
span |
number |
栅格占比 | 12 / 24 常用 |
form.col |
style |
object |
栅格样式 | 控制行高、留白 |
校验规则这一层直接决定空内容能不能拦住，材料里给出的 validator 重点就在过滤 <p><br></p> 这种表面非空、实际空白的内容。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
rules[] |
required |
boolean |
是否必填 | 强制内容输入 |
rules[] |
message |
string |
校验提示文案 | 校验失败反馈 |
rules[] |
validator |
function |
自定义校验 | 排除 <p><br></p> 空内容 |
rules[] |
trigger |
string |
触发方式 | blur / change |
组件层是真正控制编辑器实例行为的位置，多实例页面依赖 id 做区分，高度控制依赖 style.height，禁用态支持 computed 联动。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
component |
id |
string |
编辑器唯一标识 | 多 editor 防冲突 |
component |
disabled |
`boolean | computed` | 是否禁用 |
component |
style.height |
string |
编辑器可视高度 | 稳定 tab / dialog 高度 |
component |
class |
string |
自定义类名 | 定向样式控制 |
wangEditor 自身配置收口在 editorConfig，这里承接的是占位文案、只读、自动聚焦、字数限制和菜单级行为。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
editorConfig |
placeholder |
string |
占位提示 | 引导编辑内容 |
editorConfig |
readOnly |
boolean |
只读模式 | 详情页 |
editorConfig |
autoFocus |
boolean |
自动聚焦 | 提升输入体验 |
editorConfig |
maxLength |
number |
最大字符数 | 内容长度限制 |
editorConfig |
scroll |
boolean |
内部滚动 | 一般关闭 |
editorConfig |
MENU_CONF |
object |
菜单级配置 | 控制图片、视频行为 |
工具栏配置与编辑区配置分离处理，这样更适合后期做能力裁剪和菜单精简。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
toolbarConfig |
excludeKeys |
string[] |
排除工具 | 禁用代码块、视频 |
toolbarConfig |
insertKeys |
object |
插入工具 | 自定义菜单顺序 |
toolbarConfig |
toolbarKeys |
string[] |
显示工具 | 精简编辑能力 |
生命周期和事件回调适合承接日志、联动、创建后二次配置与销毁释放，材料里的 onOnChange 已经给出一个最直接的落点。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
component |
onOnChange |
function |
内容变化回调 | 日志、联动 |
component |
onCreated |
function |
编辑器创建完成 | 二次配置 |
component |
onDestroyed |
function |
销毁回调 | 释放资源 |
上传系统通过 FsUploaderFormOptions 接入，重点在上传类型、文件接收范围、是否多选、请求头、附加参数以及 buildUrl 的返回值适配。
| 参数路径 | 参数名 | 类型 | 作用说明 | 典型用途 |
|---|---|---|---|---|
uploader |
type |
string |
上传方式 | form |
uploader |
accept |
string |
接收文件类型 | 图片 / 视频 |
uploader |
multiple |
boolean |
是否多选 | 图集上传 |
uploader |
buildUrl |
function |
解析返回 URL | 适配后端格式 |
uploader |
headers |
object |
请求头 | token / auth |
uploader |
data |
object |
附加参数 | 业务字段 |
工程维护里还有一组不常放在第一眼位置、但实际非常重要的参数，这类参数更接近长期维护层面的补充认知。
| 参数 | 作用 |
|---|---|
valueChange |
表单值变更监听 |
clearable |
切换表单时清空内容 |
keepAlive |
tab 切换保持编辑器状态 |
beforeUpload |
上传前校验 |
afterUpload |
上传后内容修正 |
把这些配置层级串起来看，尺寸控制、校验控制、上传适配和实例生命周期其实并不是散的，而是一条完整的字段装配链路。
生命周期相关
处理相关
编辑相关
展示相关
富文本字段配置
列表列配置
表单栅格配置
组件基础属性
编辑区高度设置
工具栏行为配置
编辑区行为配置
内容校验规则
上传方式定义
地址解析处理
内容变化回调
创建销毁处理
结合现有材料，控制宽度时应优先检查 form.col.span、表单容器宽度、对话框或抽屉布局；控制高度时直接落到 component.style.height；空内容拦截依赖自定义 validator；上传回显依赖 buildUrl 返回正确地址格式。需要注意的是，这几个点分别属于不同层，混写到同一处通常不会生效。
总结
这组 editor-wang5 字段配置的关键设计点，在于把字段元信息、列表列展示、表单栅格、编辑器实例、上传器、事件回调分层放置。结构清晰之后，高度控制看 component.style.height，宽度控制看 form.col.span，职责边界不会混乱。
现有配置已经具备长期维护的基础，但问题也集中在几个固定位置。富文本空内容容易漏判，多实例页面容易发生冲突，弹窗与 tab 场景里的高度波动也很常见。重写思路并不复杂，核心就是把尺寸、校验、上传、生命周期分别归位，不把字段问题堆到单一配置块里。
落到后台系统实践，这类字段规范最有价值的地方，不在于参数多，而在于遇到高度异常、上传不一致、空内容提交、只读态切换这些问题时，可以直接定位到对应层。这样处理后，稳定性更容易收住，维护成本更可控，权限与展示状态也更容易保持一致。