rich-text 组件因安全限制仅支持白名单标签（如p、div、img），video、article等被底层过滤；可用nodes数组或mp-html替代，但需注意平台差异与配置细节。
rich-text 为什么直接丢掉 <video>、<article> 这些标签
不是你解析错了，是 rich-text 组件在底层就过滤掉了——它只认白名单内的标签，比如 p、div、img、strong，而 video、audio、iframe、article、section、u 全部不在名单里。微信/支付宝小程序本身就不允许动态执行脚本或嵌入外部媒体容器，所以 uni-app 只能提前拦截。
常见错误现象：<video src="xxx.mp4"></video> 传进 nodes 或字符串后彻底消失；<article>内容</article> 渲染成空白；” 这类 HTML 实体不被识别，变成乱码或截断。
- 别指望用 CSS 或事件绑定“抢救”被过滤的标签——它们压根没进 DOM 树
- 正则替换时注意匹配完整闭合对，比如用
<article[^]*?>([\s\S]*?)<\/article>，而不是只找<article> - 支付宝小程序对
u标签特别敏感，建议统一替换成span+text-decoration: underline
用 nodes 数组绕过基础过滤，但得手动处理结构和样式
rich-text 接收 nodes 数组比纯字符串更可控，因为跳过了部分 XSS 过滤逻辑，也避免了自动闭合错乱（比如 <img src="x"> 被补成 <img src="x"></img>）。
但手写 nodes 极易出错：属性必须是对象、children 必须是数组、type 字段不能漏（文本节点要写 { type: 'text', text: 'xxx' }）。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
html-parser2或mini-html-parser2解析 HTML 字符串，再映射为合规nodes结构 - 遇到
article、section，直接映射成div或p；u映射为span并加style属性 - 图片宽高问题：不仅要处理
style="width:300px"，还得提取width="300"属性并转成style，否则 iOS 小程序仍会撑破容器
mp-html 是目前最省心的替代方案，但要注意平台差异
mp-html 不是 rich-text 的封装，而是自己实现了一套标签映射 + 样式注入 + 图片懒加载的渲染链路，支持 table、pre、code、a 点击跳转等，连锚点和长按复制都内置了。
但它也不是万能的：H5 端可用 v-html 回退，但小程序端仍受限于平台能力（比如微信要求视频域名备案、支付宝禁止自动播放）。
- 安装后必须用
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'引入，路径写错会白屏 - 图片自适应需显式配置
:img-mode="'aspectFit'"，否则默认拉伸变形 - 如果富文本含相对路径图片（如
src="/uploads/x.jpg"），得配合base-url属性补全域名 - 包体积增加约 25KB，App 和小程序影响不大，但超严苛的轻量级项目需权衡
样式失效、文字溢出、实体乱码——这些不是 bug，是规则外溢
所谓“样式不生效”，大概率是因为 rich-text 过滤了 class 和内联 style；所谓“文字溢出”，其实是 ul/ol 默认宽度为 px 值且未设 word-break；所谓“” 显示异常”，是 parser 没启用 HTML 实体解码。
- 用
::v-deep ul强制设width: calc(750rpx - 64rpx) !important解决列表溢出 - 全局替换
”、“为中文引号或空格，比依赖 parser 更可靠 - 不要在
rich-text外层用scoped样式控制内部标签，改用全局 class 或::v-deep -
mp-html的tag-style配置可统一注入样式，比如给所有p加margin: 24rpx 0
真正麻烦的从来不是“怎么渲染”，而是“哪些东西不该交由富文本渲染”——比如视频，就老实用封面图 + button + 独立 video 组件；比如复杂交互表格，不如拆成 API 数据 + 自定义组件。把边界划清楚，比硬塞更稳。
