一个强大的小程序富文本组件
- 支持在多个主流的小程序平台和
uni-app中使用 - 支持丰富的标签（包括
table、video、svg等） - 支持丰富的事件效果（自动预览图片、链接处理等）
- 支持设置占位图（加载中、出错时、预览时）
- 支持锚点跳转、长按复制等丰富功能
- 支持大部分 html 实体
- 丰富的插件（关键词搜索、内容 编辑 等）
- 效率高、容错性强且轻量化（
≈24.5KB，9KB gzipped）
查看 功能介绍 了解更多
-
npm方式-
在项目目录下安装组件包
npm install mp-html
-
开发者工具中勾选
使用 npm 模块并点击工具 - 构建 npm -
在需要使用页面的
json文件中添加{ "usingComponents": { "mp-html": "mp-html" } } -
在需要使用页面的
wxml文件中添加<mp-html content="{{html}}" />
-
在需要使用页面的
js文件中添加Page({ onLoad() { this.setData({ html: '<div>Hello World!</div>' }) } })
-
-
源码方式
-
将源码中对应平台的代码包（
dist/platform）拷贝到components目录下，更名为mp-html -
在需要使用页面的
json文件中添加{ "usingComponents": { "mp-html": "/components/mp-html/index" } }
后续步骤同上
-
查看 快速开始 了解更多
-
源码方式
-
将源码中
dist/uni-app内的内容拷贝到项目根目录下
可以直接通过 插件市场 引入 -
在需要使用页面的
vue文件中添加<template> <view> <mp-html :content="html" /> </view> </template> <script> import mpHtml from '@/components/mp-html/mp-html' export default { // HBuilderX 2.5.5+ 可以通过 easycom 自动引入 components: { mpHtml }, data() { return { html: '<div>Hello World!</div>' } } } </script>
-
-
npm方式-
在项目目录下安装组件包
npm install mp-html
-
在需要使用页面的
vue文件中添加<template> <view> <mp-html :content="html" /> </view> </template> <script> import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html' export default { // 不可省略 components: { mpHtml }, data() { return { html: '<div>Hello World!</div>' } } } </script>
如果在
nvue中使用还要将dist/uni-app/static目录下的内容拷贝到项目的static目录下，否则无法运行 -
查看 快速开始 了解更多
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 链接被点击时 |
查看 事件 了解更多
组件实例上提供了一些 api 方法可供调用
| 名称 | 作用 |
|---|---|
| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
| navigateTo | 锚点跳转 |
| getText | 获取文本内容 |
| getRect | 获取富文本内容的位置和大小 |
| setContent | 设置富文本内容 |
| imgList | 获取所有图片的数组 |
查看 api 了解更多
除基本功能外，本组件还提供了丰富的扩展，可按照需要选用
| 名称 | 作用 |
|---|---|
| audio | 音乐播放器 |
| editable | 富文本编辑 |
| emoji | 解析 emoji |
| highlight | 代码块高亮显示 |
| markdown | 渲染 markdown |
| search | 关键词搜索 |
| style | 匹配 style 标签中的样式 |
| txv-video | 使用腾讯视频 |
查看 插件 了解更多
| 富文本插件 | 欢喜商城 | 多么生活 | 米兔旅行 | 全品作业小助手 | 古典文学名著阅读 |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| APP 比比 | 源创智造 | 程序员技术之旅 | Geek 时代 | 典典博客 | 咚咚阅读 |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
以上排名不分先后，更多可见 使用案例收集（欢迎添加）
-
许可
您可以免费的使用（包括商用）、复制或修改本组件 MIT License
不可用于任何违法用途
在用于生产环境前务必经过充分测试，由插件bug带来的损失概不负责（可以自行修改源码） -
支持
-
v2.0.2 (20210108)
Uuni-app包微信端利用virtualHost去除夹层，加快渲染F修复了部分情况下flex布局显示不正确的问题F修复了设置loading-img会导致懒加载失效的问题F修复了头条原生包部分情况下表格显示不正确的问题F修复了uni-app的h5和app端部分插件样式无法应用的问题F修复了uni-app包没有自动将data-src设置为src的问题F修复了uni-app包的nvue端getRect方法无法使用的问题F修复了uni-app包运行到华为快应用可能报错的问题F修复了在低版本 taro 中使用可能无法正确解析的问题 详细F修复了highlight插件pre和code之间有空白符时无法高亮的问题F修复了editable插件清空内容后插入可能报错的问题
-
v2.0.1 (20210101)
F修复了a标签自动跳转到不存在页面时可能报错的问题F修复了含合并单元格的表格设置列宽可能导致显示不正确的问题 详细F修复了表格中的图片可能错位的问题 详细F修复了原生包使用editable插件点击标签时可能报错的问题F修复了uni-app的h5和app端可能无法使用iframe和embed标签的问题 详细F修复了 uni-app 使用部分插件会报错的问题 详细
从
1.x的升级方法可见 更新指南
查看 更新日志 了解更多
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent