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 了解更多

插件扩展

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

查看 插件 了解更多

使用案例

官方示例	欢喜商城	多么生活	食法查	微慕	古典文学名著阅读

程序员技术之旅	典典博客	备忘录与记事本	优秀笔记	365 刷题	同城共享书

技术源 share	周仙神	你的代码写的真棒	谛否	小莫唐尼	模版演示

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

许可与支持

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

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

• 支持
  

更新日志

• v2.4.1 (20221225)

  1. F 修复了没有图片时 ready 事件可能不触发的问题
  2. F 修复了加载过程中可能出现 Root label not found 错误的问题 详细
  3. F 修复了 audio 插件退出页面可能会报错的问题 详细
  4. F 修复了 uni-app 包 vue3 运行到 app 在 HBuilder X 3.6.10 以上报错的问题 详细
  5. F 修复了原生包链接内有图片时可能错误换行的问题 详细
  6. F 修复了 uni-app 包 nvue 端链接中包含 %22 时可能无法显示的问题
  7. F 修复了 uni-app 包 vue3 使用 highlight 插件可能报错的问题
  8. F 修复了头条小程序使用 editable 插件内容为空时点击会报错的问题

• v2.4.0 (20220827)

  1. A 增加了 setPlaybackRate 的 api，可以设置音视频的播放速率 详细
  2. A 示例小程序代码开源 详细
  3. U 优化 ready 事件触发时机，未设置懒加载的情况下基本可以准确触发 详细
  4. U highlight 插件在编辑状态下不进行高亮处理，便于编辑
  5. F 修复了 flex 布局下图片大小可能不正确的问题
  6. F 修复了 selectable 属性没有设置 force 也可能出现渲染异常的问题
  7. F 修复了表格中的图片大小可能不正确的问题 详细
  8. F 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
  9. F 修复了 editable 插件在 scroll-view 中使用时工具条位置可能不正确的问题
  10. F 修复了 uni-app 包 vue3 使用 search 插件可能导致错误换行的问题 详细

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

查看 更新日志 了解更多