小程序-uniapp：vue3-typescript项目使用mp-html实现展示富文本

1、mp-html 和 rich-text 相比 有什么优势

对比维度	rich-text	mp-html
标签支持	基础标签，不支持复杂元素	全HTML标签支持，包括video、table等
交互功能	仅整体点击，功能有限	图片预览、链接跳转、代码高亮等丰富交互
跨平台兼容	仅微信小程序	多平台+uni-app，一套代码适配全端
性能表现	复杂内容渲染卡顿	轻量化设计，性能提升300%
安全控制	无法过滤恶意标签	支持禁用危险标签，样式隔离
扩展能力	功能单一，需自行开发	插件生态丰富，支持按需扩展

2、安装 mp-html

pnpm install mp-html

3、pages.json easycom 配置

"^mp-html(.*)": "mp-html/dist/uni-app/components/mp-html/mp-html.vue"

4、使用

<mp-html :content="richText"/>

成功

5、mp-html 核心属性

属性名	类型	默认值	说明
content	String	-	需渲染的 HTML 字符串，支持复杂标签（如 table、video、svg）。
container-style	String	-	容器样式（如 padding: 10px;），自定义渲染区域外观。
copy-link	Boolean	true	外部链接点击时是否自动复制链接地址（H5/App 平台直接跳转）。
domain	String	-	主域名，用于拼接相对路径的链接（如 img 的 src）。
error-img	String	-	图片加载失败时的占位图路径。
lazy-load	Boolean	false	是否启用图片懒加载，优化长页面性能。
loading-img	String	-	图片加载中的占位图路径。
pause-video	Boolean	true	播放一个视频时是否自动暂停其他视频（避免同时播放）。
preview-img	Boolean	true	图片点击是否自动预览（支持左右滑动查看所有图片）。
scroll-table	Boolean	false	表格是否添加横向滚动层（解决宽表格显示问题）。
selectable	Boolean	false	是否允许长按复制文本（iOS 端需设为 "force" 解决兼容问题）。
set-title	Boolean	true	是否将 HTML 中的 title 标签内容设置为页面标题。
show-img-menu	Boolean	true	图片长按是否显示菜单（如保存、分享）。
tag-style	Object	-	自定义标签默认样式（如 { p: 'margin: 10px;' }）。
use-anchor	Boolean	false	是否启用锚点跳转（可设置偏移量）。 开启后会显示id，如下图，知识前面多了个类似id的字符串 哈希前缀是正常现象 ，是 mp-html 为避免 id 冲突设计的机制 跳转时直接用原始 id，组件会自动处理匹配。 无需手动修改或关注前缀，专注于业务逻辑即可。

6、mp-html 核心方法

方法名	参数	说明
setContent(content, append)	content（String）：HTML 字符串 append（Boolean）：是否追加内容	动态设置富文本内容（append=false 时覆盖原有内容）。
navigateTo(id, offset)	id（String）：锚点 ID offset（Number）：跳转偏移量（px）	滚动至指定锚点位置（需启用 use-anchor）。
getText()	-	获取富文本中的纯文本内容。
imgList	-	获取所有图片的数组（含 src、original-src 等属性）。
pauseMedia()	-	暂停所有正在播放的音视频。

7、设置锚点

// <view> 不能设置固定高度，否则锚点导航不生效
<view :style={height: auto}>
    <mp-html
      ref="mpHtmlRef"
      :content="renderedFullText"
      :use-anchor="true"
    />
</view>

// 定义ref
const mpHtmlRef = ref<any>(null);

// 导航到锚点位置
const navigateTo= (item: any) => {
  if (mpHtmlRef.value) {
    mpHtmlRef.value.navigateTo('div4', 50);
  }
};


// mpHtmlRef.value.navigateTo 内部核心方法用的是
uni.pageScrollTo({
    scrollTop,
    duration: 300
})

测试成功

8、欢迎交流指正