【Dv3Admin】FastCRUD富文本编辑器操作

富文本字段放进后台表单后最常见的问题不是能不能显示而是编辑区尺寸失控、弹窗布局被撑开、列表页误展示大段内容。表现通常集中在高度不稳定、宽度跟随栅格异常变化、空内容校验失效排查时很容易把问题混到编辑器本体、表单布局、上传配置几个层面里。这篇内容围绕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 表单并把高度、宽度、禁用态、上传器和校验规则放到正确位置。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() pbr/p){throw newError(内容不能为空);}}}], 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_articletitlestring字段显示名称表单 label、详情页标题content_articletypestring使用的组件类型固定为editor-wang5content_articlevalueBuilderfunction表单值构建函数回显时对内容做前置处理content_articlevalueResolvefunction提交前值转换提交前做清洗、裁剪、转码列表列配置只服务于列表页展示不参与编辑器真正的渲染尺寸控制column.width解决的是表格列宽不是编辑器宽度。参数路径参数名类型作用说明典型用途columnshowboolean是否在列表中显示富文本一般设为falsecolumnwidthnumber列宽少量摘要展示columnalignstring对齐方式居中 / 左对齐columnformatterfunction列内容格式化截断富文本、转纯文本columnellipsisboolean超出省略列表简化展示表单级配置负责的是字段是否出现、占几列、默认值、只读态和提示文案宽度控制落点实际就在这一层。参数路径参数名类型作用说明典型用途formshowboolean | computed是否显示该字段按文章类型动态显示formvaluestring默认值新建时插入模板formreadonlyboolean | computed只读状态查看 / 审核模式formlabelWidthstring单字段标签宽度富文本字段对齐formhelper.textstring字段说明编辑规范提示form.colspannumber栅格占比12 / 24 常用form.colstyleobject栅格样式控制行高、留白校验规则这一层直接决定空内容能不能拦住材料里给出的validator重点就在过滤pbr/p这种表面非空、实际空白的内容。参数路径参数名类型作用说明典型用途rules[]requiredboolean是否必填强制内容输入rules[]messagestring校验提示文案校验失败反馈rules[]validatorfunction自定义校验排除pbr/p空内容rules[]triggerstring触发方式blur/change组件层是真正控制编辑器实例行为的位置多实例页面依赖id做区分高度控制依赖style.height禁用态支持computed联动。参数路径参数名类型作用说明典型用途componentidstring编辑器唯一标识多 editor 防冲突componentdisabledboolean | computed是否禁用查看态、锁定态componentstyle.heightstring编辑器可视高度稳定 tab / dialog 高度componentclassstring自定义类名定向样式控制wangEditor自身配置收口在editorConfig这里承接的是占位文案、只读、自动聚焦、字数限制和菜单级行为。参数路径参数名类型作用说明典型用途editorConfigplaceholderstring占位提示引导编辑内容editorConfigreadOnlyboolean只读模式详情页editorConfigautoFocusboolean自动聚焦提升输入体验editorConfigmaxLengthnumber最大字符数内容长度限制editorConfigscrollboolean内部滚动一般关闭editorConfigMENU_CONFobject菜单级配置控制图片、视频行为工具栏配置与编辑区配置分离处理这样更适合后期做能力裁剪和菜单精简。参数路径参数名类型作用说明典型用途toolbarConfigexcludeKeysstring[]排除工具禁用代码块、视频toolbarConfiginsertKeysobject插入工具自定义菜单顺序toolbarConfigtoolbarKeysstring[]显示工具精简编辑能力生命周期和事件回调适合承接日志、联动、创建后二次配置与销毁释放材料里的onOnChange已经给出一个最直接的落点。参数路径参数名类型作用说明典型用途componentonOnChangefunction内容变化回调日志、联动componentonCreatedfunction编辑器创建完成二次配置componentonDestroyedfunction销毁回调释放资源上传系统通过FsUploaderFormOptions接入重点在上传类型、文件接收范围、是否多选、请求头、附加参数以及buildUrl的返回值适配。参数路径参数名类型作用说明典型用途uploadertypestring上传方式formuploaderacceptstring接收文件类型图片 / 视频uploadermultipleboolean是否多选图集上传uploaderbuildUrlfunction解析返回 URL适配后端格式uploaderheadersobject请求头token / authuploaderdataobject附加参数业务字段工程维护里还有一组不常放在第一眼位置、但实际非常重要的参数这类参数更接近长期维护层面的补充认知。参数作用valueChange表单值变更监听clearable切换表单时清空内容keepAlivetab 切换保持编辑器状态beforeUpload上传前校验afterUpload上传后内容修正把这些配置层级串起来看尺寸控制、校验控制、上传适配和实例生命周期其实并不是散的而是一条完整的字段装配链路。生命周期相关处理相关编辑相关展示相关富文本字段配置列表列配置表单栅格配置组件基础属性编辑区高度设置工具栏行为配置编辑区行为配置内容校验规则上传方式定义地址解析处理内容变化回调创建销毁处理结合现有材料控制宽度时应优先检查form.col.span、表单容器宽度、对话框或抽屉布局控制高度时直接落到component.style.height空内容拦截依赖自定义validator上传回显依赖buildUrl返回正确地址格式。需要注意的是这几个点分别属于不同层混写到同一处通常不会生效。总结这组editor-wang5字段配置的关键设计点在于把字段元信息、列表列展示、表单栅格、编辑器实例、上传器、事件回调分层放置。结构清晰之后高度控制看component.style.height宽度控制看form.col.span职责边界不会混乱。现有配置已经具备长期维护的基础但问题也集中在几个固定位置。富文本空内容容易漏判多实例页面容易发生冲突弹窗与 tab 场景里的高度波动也很常见。重写思路并不复杂核心就是把尺寸、校验、上传、生命周期分别归位不把字段问题堆到单一配置块里。落到后台系统实践这类字段规范最有价值的地方不在于参数多而在于遇到高度异常、上传不一致、空内容提交、只读态切换这些问题时可以直接定位到对应层。这样处理后稳定性更容易收住维护成本更可控权限与展示状态也更容易保持一致。