一个强大的小程序富文本组件
- 欢迎加入
QQ
交流群:699734691
- 示例微信小程序
富文本插件
添加获取组件包
功能 详细
- 支持在多个主流的小程序平台和
uni-app
中使用 - 支持丰富的标签(包括
table
、video
、svg
等) - 支持丰富的事件效果(自动预览图片、链接处理等)
- 支持设置占位图(加载中、出错时、预览时)
- 支持锚点跳转、长按复制等丰富功能
- 支持大部分 html 实体
- 丰富的插件(关键词搜索、内容 编辑 等)
- 效率高、容错性强且轻量化(
≈25KB
,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>
使用
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 | 链接被点击时 |
查看 事件 了解更多
组件实例上提供了一些 api
方法可供调用
名称 | 作用 |
---|---|
in | 将锚点跳转的范围限定在一个 scroll-view 内 |
navigateTo | 锚点跳转 |
getText | 获取文本内容 |
getRect | 获取富文本内容的位置和大小 |
setContent | 设置富文本内容 |
imgList | 获取所有图片的数组 |
查看 api 了解更多
除基本功能外,本组件还提供了丰富的扩展,可按照需要选用
名称 | 作用 |
---|---|
audio | 音乐播放器 |
editable | 富文本编辑 |
emoji | 解析 emoji |
highlight | 代码块高亮显示 |
markdown | 渲染 markdown |
search | 关键词搜索 |
style | 匹配 style 标签中的样式 |
txv-video | 使用腾讯视频 |
img-cache | 图片缓存 by @PentaTea |
查看 插件 了解更多
官方示例 | 欢喜商城 | 多么生活 | 全品作业小助手 | 米兔旅行 | 食法查 |
---|---|---|---|---|---|
微慕 | 古典文学名著阅读 | 程序员技术之旅 | 典典博客 | Geek 时代 | 备忘录与记事本 |
---|---|---|---|---|---|
优秀笔记 | 365 刷题 | 同城共享书 | 技术源 share | 周仙神 | 你的代码写的真棒 |
---|---|---|---|---|---|
以上排名不分先后,更多可见 使用案例收集(欢迎添加)
-
许可
您可以免费的使用(包括商用)、复制或修改本组件 MIT License
在用于生产环境前务必经过充分测试,由插件bug
带来的损失概不负责(可以自行修改源码)
-
v2.3.0 (20220401)
A
增加了play
事件,音视频播放时触发,可用于与页面其他音视频进行互斥播放 详细U
show-img-menu
属性支持控制预览时是否长按弹出菜单U
优化wxs
处理,提高渲染性能 详细U
video
标签支持object-fit
属性U
增加支持一些常用实体编码 详细F
修复了图片仅设置高度可能不显示的问题 详细F
修复了video
标签高度设置为auto
不显示的问题 详细F
修复了使用grid
布局时可能样式错误的问题 详细F
修复了含有合并单元格的表格部分情况下显示异常的问题 详细F
修复了百度小程序使用br
标签可能部分不显示的问题 详细F
修复了editable
插件连续插入内容时顺序不正确的问题F
修复了uni-app
包vue3
使用audio
插件报错的问题F
修复了uni-app
包highlight
插件使用自定义的prism.min.js
报错的问题 详细
-
v2.2.2 (20220226)
A
增加了 pauseMedia 的api
,可用于暂停播放音视频 详细U
优化了长内容的加载速度U
uni-app
包适配vue3
#389、#398 by @zhouhuafei、#400F
修复了小程序端图片高度设置为百分比时可能不显示的问题F
修复了highlight
插件部分情况下可能显示不完整的问题 详细
从
1.x
的升级方法可见 更新指南
查看 更新日志 了解更多