【Dv3Admin】FastCRUD MD编辑器操作

富文本字段和 Markdown 字段在后台表单里的问题本质上很像真正麻烦的都不是“能不能挂进去”而是挂进去以后尺寸、回显、校验和展示边界是否稳定。放到md-editor-v3之后最常见的问题通常集中在编辑区高度不合适、宽度被表单栅格压缩、列表页直接把大段 Markdown 原文露出来以及空字符串、空格、空行这类内容没有被正确拦住。这篇内容围绕fast-crud md-editor-v3这一段 Markdown 字段配置展开重点拆开content_md的字段定义、column与form的职责边界、form.col.span与component.style.height的尺寸控制方式以及 Markdown 字段在后台表单里常见的校验、回显和展示处理。重点不放在 Markdown 编辑器原理而放在后台 CRUD 表单里真正高频的几个问题怎么放、怎么控、怎么拦、怎么维护。文章目录需求解析功能实现总结需求解析当前场景对应的是后台表单中的 Markdown 编辑器字段运行语境可以明确放在fast-crud md-editor-v3体系内。目标不是单纯把组件渲染出来而是让它在新增、编辑、弹窗、抽屉、详情查看这些场景里都保持相对稳定的尺寸和行为。Markdown 字段和富文本字段最大的不同在于数据形态。富文本编辑器提交的是 HTML 片段而md-editor-v3提交的通常就是 Markdown 原文字符串所以在值回显和提交链路上会更直接。但这并不代表它就没有配置问题。真正高频的问题仍然集中在几个位置宽度实际上由表单栅格决定而不是编辑器自己决定高度如果没有单独控制编辑体验很容易失衡列表页误展示大段 Markdown 文本会直接破坏列表可读性空内容如果只做简单必填空格和空行仍然可能漏过去Markdown 存储和详情页渲染是两个层不应该混成一个问题也就是说这类字段真正要解决的不是“怎么接组件”而是“怎么把一个 Markdown 编辑器字段放进 CRUD 表单体系后仍然保持职责清晰”。数据处理编辑器实例表单承载字段定义Markdown 字段接入声明字段名称指定组件类型配置列表展示设置表单栅格绑定默认值或显示状态设置校验规则控制编辑器高度配置占位提示处理禁用或只读状态值回显字符串提交详情页渲染从这条链路看Markdown 编辑器的宽度控制落在form.col.span这一层高度控制落在component.style.height这一层列表展示则完全属于column层。几个问题分别属于不同的配置块如果把它们混在一起处理通常就会出现“改了不生效”或者“以为是编辑器问题结果其实是表单布局问题”的情况。功能实现这里直接以一个典型的md-editor-v3字段为例目标是把 Markdown 编辑器完整挂进 FastCRUD 表单并把宽度、高度、校验和回显放到正确层级。content_md:{title:Markdown内容,type:md-editor-v3,column:{show:false,width:300},form:{col:{span:24},rules:[{validator:async(rule,value){if(!value||!value.trim()){thrownewError(内容不能为空);}},trigger:blur}],component:{style:{height:600px},placeholder:请输入 Markdown 内容}}}这一段结构看起来不复杂但几个关键点必须拆开理解。type: md-editor-v3决定当前字段使用 Markdown 编辑器组件。这里的组件类型只负责“用什么编辑器”不负责宽度和高度的完整布局。真正影响显示区域大小的是后面的表单层和组件层配置。列表列配置里的column.width和column.show只属于列表页不参与编辑区尺寸控制。width: 300的作用是控制表格列宽而不是控制编辑器本体宽度show: false的作用是避免正文在列表页直接铺开。Markdown 内容通常较长还会带标题、代码块、列表和表格如果放在列表里直接展示页面会非常乱所以这一层通常默认就是不展示正文。字段顶层配置本身承担的是字段元信息和数据构建职责适合抽成统一说明表。参数路径参数名类型作用说明典型用途content_mdtitlestring字段显示名称表单标题、详情标题content_mdtypestring使用的组件类型固定为md-editor-v3content_mdvalueBuilderfunction回显前值处理编辑前格式整理content_mdvalueResolvefunction提交前值处理提交前清洗字符串列表列配置只服务于列表展示不解决 Markdown 编辑器尺寸问题。参数路径参数名类型作用说明典型用途columnshowboolean是否在列表中显示正文一般设为falsecolumnwidthnumber列宽摘要展示columnformatterfunction格式化显示内容截断 Markdown 文本columnellipsisboolean超出省略避免列表过长columnalignstring列对齐方式左对齐或居中Markdown 字段真正的宽度控制在表单层。比如form:{col:{span:24}}这里的span: 24表示该字段占满整行。如果改成12那它只占半行。编辑器看起来“太窄”通常不是md-editor-v3本身的问题而是表单栅格只给了它一半空间。所以表单层配置才是宽度的实际落点。参数路径参数名类型作用说明典型用途formshowboolean | computed是否显示字段条件显隐formvaluestring默认值新建时填充模板formreadonlyboolean | computed只读状态详情态、审核态formhelper.textstring字段说明提示支持 Markdown 语法form.colspannumber栅格宽度24 最常用form.colstyleobject栅格样式留白和间距控制接下来是高度控制。Markdown 编辑器的高度一般不放在顶层也不依赖表格列配置而是放在组件层component:{style:{height:600px}}这个位置控制的是编辑器可视区域高度。弹窗表单里如果不显式控制高度编辑器区域经常会偏小单页编辑模式下如果高度过低长文档编辑体验会很差。也就是说高度属于组件层而不是表单栅格层。参数路径参数名类型作用说明典型用途componentstyle.heightstring编辑器可视高度控制编辑区域高度componentplaceholderstring占位提示引导输入 Markdowncomponentdisabledboolean | computed是否禁用查看态、锁定态componentpreviewboolean是否启用预览结合组件能力决定componenttoolbarsarray工具栏配置精简工具项Markdown 字段的校验相对直接因为它本质上是字符串不像富文本那样会生成pbr/p这种 HTML 空壳。但这不代表required: true就一定够用。因为用户仍然可能只输入空格或者空行。更稳的写法还是自定义校验rules:[{validator:async(rule,value){if(!value||!value.trim()){thrownewError(内容不能为空);}},trigger:blur}]这样可以把空字符串、空格和只有空行的内容一并拦掉。参数路径参数名类型作用说明典型用途rules[]requiredboolean是否必填强制填写内容rules[]messagestring错误提示校验失败反馈rules[]validatorfunction自定义校验拦截空格和空行rules[]triggerstring触发时机blur/change值处理这一层是 Markdown 编辑器和富文本编辑器差别最大的地方。md-editor-v3提交的通常就是 Markdown 原文字符串所以回显和提交链路相对简单数据库存的是 Markdown 字符串表单回显时直接回填这个字符串提交时继续把字符串传给后端真正渲染 HTML 的动作放在详情页或前台展示层也就是说Markdown 存储和 Markdown 渲染是两个阶段不建议混成一个字段问题处理。如果详情页需要渲染效果应该在展示层再用 Markdown 渲染器把内容转成 HTML而不是在编辑时就把字段存成 HTML。这一层也可以抽成一个简化理解链路数据库中的 Markdown 字符串FastCRUD 表单回显md-editor-v3 编辑提交字符串到后端详情页渲染为 HTML如果把整个字段装配过程串起来看Markdown 字段的维护重点其实可以归到四个问题列表是否展示正文、表单给了多大宽度、组件给了多高高度、提交前有没有做空内容校验。这些点分别属于column、form、component和rules四个层次不应该揉成一个“编辑器问题”。对于工程维护来说Markdown 字段还有一组常见但不一定第一眼就会配到的补充参数也值得顺手整理出来。参数作用valueChange监听 Markdown 内容变化keepAlivetab 切换保持编辑器状态clearable切换表单时清空内容readonly详情模式只读展示helper.text给编辑人员提示 Markdown 规范如果只是想要一套能直接用的最小稳定配置可以收敛成这样content_md:{title:教程内容,type:md-editor-v3,column:{show:false},form:{col:{span:24},helper:{text:支持 Markdown 语法可输入标题、列表、代码块、表格等内容},rules:[{validator:async(rule,value){if(!value||!value.trim()){thrownewError(内容不能为空);}},trigger:blur}],component:{style:{height:600px},placeholder:请输入教程内容}}}放到后台教程、帮助文档、接口说明这类场景里基本已经够用。总结这组md-editor-v3字段配置的关键不在于参数有多少而在于把字段元信息、列表展示、表单栅格、编辑器尺寸和内容校验放到各自正确的层级里。结构理顺之后宽度控制看form.col.span高度控制看component.style.height正文是否出现在列表里看column.show空内容能不能拦住则看rules.validator。Markdown 编辑器在后台表单里的问题通常都比较集中宽度不够、编辑区过矮、正文误上列表、空格内容漏判。解决思路本身并不复杂关键是不要把这些问题都误归到编辑器本体上。表单层、组件层、展示层、提交层各自负责一段问题定位才会快后续维护也更稳定。落到后台系统实践里这类字段规范的意义并不是“参数更全”而是遇到弹窗高度异常、列表展示混乱、详情渲染边界不清、校验失效这些问题时可以直接定位到正确配置层。这样处理之后Markdown 字段就不只是能用而是能比较稳定地长期维护。