mp-html

> 一个强大的小程序富文本组件

!star
!forks
!downloads
!license

功能介绍

- 支持在多个主流的小程序平台和 uni-app 中使用
- 支持丰富的标签（包括 table、video、svg 等）
- 支持丰富的事件效果（自动预览图片、链接处理等）
- 支持设置占位图（加载中、出错时、预览时）
- 支持锚点跳转、长按复制等丰富功能
- 支持大部分 html 实体
- 丰富的插件（关键词搜索、内容编辑、latex 公式等）
- 效率高、容错性强且轻量化（≈25KB，9KB gzipped）

查看 功能介绍 了解更多

使用方法

$3

- npm 方式
1. 在项目目录下安装组件包

``bash
npm install mp-html
`
2. 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm
3. 在需要使用页面的 json 文件中添加

`json
{
"usingComponents": {
"mp-html": "mp-html"
}
}
`
4. 在需要使用页面的 wxml 文件中添加

`html

`
5. 在需要使用页面的 js 文件中添加

`javascript
Page({
onLoad () {
this.setData({
html: '

Hello World!

'
})
}
})
`
- 源码方式
1. 将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
2. 在需要使用页面的 json 文件中添加

`json
{
"usingComponents": {
"mp-html": "/components/mp-html/index"
}
}
`

后续步骤同上

查看 快速开始 了解更多

$3

- 源码方式
1. 将源码中 dist/uni-app 内的内容拷贝到项目根目录下
可以直接通过 插件市场 引入
2. 在需要使用页面的 vue 文件中添加

`vue


`
- npm 方式
1. 在项目目录下安装组件包

`bash
npm install mp-html
`
2. 在需要使用页面的 vue 文件中添加

`vue


`

使用 cli 方式运行的项目，通过 npm 方式引入时，需要在 vue.config.js 中配置 transpileDependencies，详情可见 #330
如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行

查看 快速开始 了解更多

组件属性

| 属性 | 类型 | 默认值 | 说明 |
|:---:|:---:|:---:|---|
| container-style | String | | 容器的样式（2.1.0+） |
| content | String | | 用于渲染的 html 字符串 |
| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
| domain | String | | 主域名（用于链接拼接） |
| 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 | 是否开启文本长按复制 |
| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
| tag-style | Object | | 设置标签的默认样式 |
| use-anchor | Boolean | false | 是否使用锚点链接 |

查看 属性 了解更多

组件事件

| 名称 | 触发时机 |
|:---:|---|
| load | dom 树加载完毕时 |
| ready | 图片加载完毕时 |
| error | 发生渲染错误时 |
| imgtap | 图片被点击时 |
| linktap | 链接被点击时 |
| play | 音视频播放时（2.3.0+） |
| pause | 音视频暂停时（2.5.2+） |
| fullscreenchange | 视频全屏变化时（2.5.2+） |

查看 事件 了解更多

api

组件实例上提供了一些 api 方法可供调用

| 名称 | 作用 |
|:---:|---|
| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
| navigateTo | 锚点跳转 |
| getText | 获取文本内容 |
| getRect | 获取富文本内容的位置和大小 |
| setContent | 设置富文本内容 |
| imgList | 获取所有图片的数组 |
| pauseMedia | 暂停播放音视频（2.2.2+） |
| setPlaybackRate | 设置音视频播放速率（2.4.0+） |

查看 api 了解更多

插件扩展

除基本功能外，本组件还提供了丰富的扩展，可按照需要选用

| 名称 | 作用 |
|:---:|---|
| audio | 音乐播放器 |
| editable | 富文本编辑 |
| emoji | 解析 emoji |
| highlight | 代码块高亮显示 |
| markdown | 渲染 markdown |
| search | 关键词搜索 |
| style | 匹配 style 标签中的样式 |
| txv-video | 使用腾讯视频 |
| img-cache | 图片缓存 by @PentaTea |
| latex | 渲染 latex 公式 by @Zeng-J |
| card | 卡片展示 by @whoooami |

查看 插件 了解更多

许可与支持

- 许可
您可以免费的使用（包括商用）、复制或修改本组件 MIT License
在用于生产环境前务必经过充分测试，由插件 bug 带来的损失概不负责（可以自行修改源码）

- 联系
欢迎加入 QQ 交流群：
群1（已满）：699734691
群2（已满）：778239129
群3：960265313

更新日志

- v2.5.2 (20251214)
1. A 增加了音视频暂停 pause 和视频全屏 fullscreenchange 事件 #495 #595
2. U 优化了 流式输出 效果，通过差量更新解决闪烁问题 详细
3. U latex 插件更新字体文件 详细 by @JiuyeXD
4. U 更新 markdown 插件中 marked.js 版本 详细
5. U 微信小程序替换遗漏的废弃 api getSystemInfoSync 详细 by @zcSkr
6. F 修复了 markdown 插件加粗文本遇到中文符号无效的问题 详细 by @qp666

- v2.5.1 (20250420)
1. U uni-app 包适配鸿蒙 APP 详细
2. U 微信小程序替换废弃 api getSystemInfoSync 详细
3. F 修复了微信小程序 glass-easel 框架下真机换行异常的问题 详细 by @PaperStrike
4. F 修复了 uni-app 包 app 端播放视频可能报错的问题 详细
5. F 修复了 latex 插件可能出现 xxx can be used only in display mode 的问题 详细
6. F 修复了 uni-app 包 latex 公式可能不显示的问题 #599、#627

从 1.x` 的升级方法可见 更新指南

查看 更新日志 了解更多