更新记录

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-app 包 latex 公式可能不显示的问题 #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 修复了 h5 和 app 端部分情况下样式无法识别的问题 详细
8. F 修复了 latex 插件部分情况下显示不正确的问题 详细
9. F 修复了 editable 插件表格无法删除的问题
10. F 修复了 editable 插件 vue3 h5 端点击图片报错的问题
11. F 修复了 editable 插件点击表格没有菜单栏的问题

v2.4.3（2024-01-21） 下载此版本

1. A 增加 card 插件 详细 by @whoooami
2. F 修复了 svg 中包含 foreignobject 可能不显示的问题 详细
3. F 修复了合并单元格的表格部分情况下显示不正确的问题 详细
4. F 修复了 img 标签设置 object-fit 无效的问题 详细
5. F 修复了 latex 插件公式会换行的问题 详细
6. F 修复了 editable 和 audio 插件共用时点击 audio 无法编辑的问题 详细 by @whoooami
7. F 修复了微信小程序部分情况下图片会报错 replace of undefined 的问题
8. F 修复了快手小程序图片不显示的问题 详细

平台兼容性

uni-app

其他

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

功能介绍

• 全端支持（含 v3、NVUE）
• 支持丰富的标签（包括 table、video、svg 等）
• 支持丰富的事件效果（自动预览图片、链接处理等）
• 支持设置占位图（加载中、出错时、预览时）
• 支持锚点跳转、长按复制等丰富功能
• 支持大部分 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. 从 github 或 gitee 下载源码
     插件市场的 非 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 目录下，否则无法运行

查看 快速开始 了解更多

组件属性

查看 属性 了解更多

组件事件

查看 事件 了解更多

api

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

查看 api 了解更多

插件扩展

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

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

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（已满）：***
2（已满）：` ***3：960265313`

查看 问题反馈 了解更多