mp-html v2.5.0

mp-html

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

功能介绍

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

查看 功能介绍 了解更多

使用方法

原生平台

• npm 方式

  1. 在项目目录下安装组件包

     npm install mp-html

  2. 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm

  3. 在需要使用页面的 json 文件中添加

     {
       "usingComponents": {
         "mp-html": "mp-html"
       }
     }

  4. 在需要使用页面的 wxml 文件中添加

     <mp-html content="{{html}}" />

  5. 在需要使用页面的 js 文件中添加

     Page({
       onLoad () {
         this.setData({
           html: '<div>Hello World!</div>'
         })
       }
     })

• 源码方式

  1. 将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html

  2. 在需要使用页面的 json 文件中添加

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

  后续步骤同上

查看 快速开始 了解更多

uni-app

• 源码方式

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

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

  1. 在项目目录下安装组件包

     npm install mp-html

  2. 在需要使用页面的 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 目录下，否则无法运行

查看 快速开始 了解更多

组件属性

查看 属性 了解更多

组件事件

查看 事件 了解更多

api

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

查看 api 了解更多

插件扩展

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

查看 插件 了解更多

许可与支持

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

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

更新日志

• v2.5.0 (20240422)

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

• v2.4.3 (20240121)

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

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

查看 更新日志 了解更多