mp-html

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

功能介绍

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

查看 功能介绍 了解更多

使用方法

原生平台

• npm 方式

• 在项目目录下安装组件包

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

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

  html <mp-html content="{{html}}" /> 5. 在需要使用页面的 js 文件中添加

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

Hello World!

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

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

后续步骤同上

查看 快速开始 了解更多

uni-app

• 源码方式
• 将源码中 dist/uni-app 内的内容拷贝到项目根目录下
  可以直接通过 插件市场 引入

• 在需要使用页面的 vue 文件中添加

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

   ```bash
   npm install mp-html
   ```
  

  1. 在需要使用页面的 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

     查看 插件 了解更多

     使用案例

     官方示例	欢喜商城	多么生活	食法查	微慕	科学复习

     程序员技术之旅	典典博客	优秀笔记	同城共享书	技术源 share	你的代码写的真棒

     谛否	小莫唐尼	模版演示	AI瓦力	豆流便签	前端八股通

     以上排名不分先后，更多可见 使用案例收集（欢迎添加）

     许可与支持

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

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

     • 支持
       

     更新日志

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

     • F 修复了 markdown 插件加粗文本遇到中文符号无效的问题 详细 by @qp666

     • v2.5.1 (20250420)

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

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

     查看 更新日志 了解更多