更新记录

v2.5.2(2025-12-14) 下载此版本

  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(2025-04-20) 下载此版本

  1. U 适配鸿蒙 APP 详细
  2. U 微信小程序替换废弃 api getSystemInfoSync 详细
  3. F 修复了 app 端播放视频可能报错的问题 详细
  4. F 修复了 latex 插件可能出现 xxx can be used only in display mode 的问题 详细
  5. F 修复了 uni-applatex 公式可能不显示的问题 #599#627

v2.5.0(2024-04-22) 下载此版本

  1. U play 事件增加返回 src 等信息 详细
  2. U preview-img 属性支持设置为 all 开启 base64 图片预览 详细
  3. U editable 插件增加简易模式(点击文字直接编辑)
  4. U latex 插件支持块级公式 详细
  5. F 修复了表格部分情况下背景丢失的问题 详细
  6. F 修复了部分 svg 无法显示的问题 详细
  7. F 修复了 h5app 端部分情况下样式无法识别的问题 详细
  8. F 修复了 latex 插件部分情况下显示不正确的问题 详细
  9. F 修复了 editable 插件表格无法删除的问题
  10. F 修复了 editable 插件 vue3 h5 端点击图片报错的问题
  11. F 修复了 editable 插件点击表格没有菜单栏的问题
查看更多

平台兼容性

uni-app(3.6.15)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
-
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - -

为减小组件包的大小,默认组件包中不包含编辑、latex 公式等扩展功能,需要使用扩展功能的请参考下方的 插件扩展 栏的说明

功能介绍

  • 全端支持(含 v3、NVUE
  • 支持丰富的标签(包括 tablevideosvg 等)
  • 支持丰富的事件效果(自动预览图片、链接处理等)
  • 支持设置占位图(加载中、出错时、预览时)
  • 支持锚点跳转、长按复制等丰富功能
  • 支持大部分 html 实体
  • 丰富的插件(关键词搜索、内容编辑、latex 公式等)
  • 效率高、容错性强且轻量化

查看 功能介绍 了解更多

使用方法

  • uni_modules 方式

    1. 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/mp-html 目录下
    2. 在需要使用页面的 (n)vue 文件中添加
      <!-- 不需要引入,可直接使用 -->
      <mp-html :content="html" />
      export default {
      data() {
       return {
         html: '<div>Hello World!</div>'
       }
      }
      }
    3. 需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可
  • 源码方式

    1. githubgitee 下载源码
      插件市场的 非 uni_modules 版本 无法更新,不建议从插件市场获取
    2. 在需要使用页面的 (n)vue 文件中添加
      <mp-html :content="html" />
      import mpHtml from '@/components/mp-html/mp-html'
      export default {
      // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
      components: {
       mpHtml
      },
      data() {
       return {
         html: '<div>Hello World!</div>'
       }
      }
      }
  • npm 方式

    1. 在项目根目录下执行
      npm install mp-html
    2. 在需要使用页面的 (n)vue 文件中添加
      <mp-html :content="html" />
      import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
      export default {
      // 不可省略
      components: {
       mpHtml
      },
      data() {
       return {
         html: '<div>Hello World!</div>'
       }
      }
      }
    3. 需要更新版本时执行以下命令即可
      npm update mp-html

    使用 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

从插件市场导入的包中 不含有 扩展插件,使用插件需通过微信小程序 富文本插件 获取或参考以下方法进行打包:

  1. 获取完整组件包
    npm install mp-html
  2. 编辑 tools/config.js 中的 plugins 项,选择需要的插件
  3. 生成新的组件包
    node_modules/mp-html 目录下执行
    npm install
    npm run build:uni-app
  4. 拷贝 dist/uni-app 中的内容到项目根目录

查看 插件 了解更多

关于 nvue

nvue 使用原生渲染,不支持部分 css 样式,为实现和 html 相同的效果,组件内部通过 web-view 进行渲染,性能上差于原生,根据 weex 官方建议,web 标签仅应用在非常规的降级场景。因此,如果通过原生的方式(如 richtext)能够满足需要,则不建议使用本组件,如果有较多的富文本内容,则可以直接使用 vue 页面
由于渲染方式与其他端不同,有以下限制:

  1. 不支持 lazy-load 属性
  2. 视频不支持全屏播放
  3. 如果在 flex-direction: row 的容器中使用,需要给组件设置宽度或设置 flex: 1 占满剩余宽度

nvue 模式下,此问题 修复前,不支持通过 uni_modules 引入,需要本地引入(将 dist/uni-app 中的内容拷贝到项目根目录下)

立即体验

富文本插件

问题反馈

遇到问题时,请先查阅 常见问题issue 中是否已有相同的问题
可通过 issue 、插件问答或发送邮件到 mp_html@126.com 提问,不建议在评论区提问(不方便回复)
提问请严格按照 issue 模板 ,描述清楚使用环境、html 内容或可复现的 demo 项目以及复现方式,对于 描述不清无法复现 或重复的问题将不予回复

欢迎加入 QQ 交流群:
群1(已满):699734691
群2(已满):778239129
群3:960265313

查看 问题反馈 了解更多

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议