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

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

  后续步骤同上

查看 快速开始 了解更多

• 源码方式

  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>

  如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行

查看 快速开始 了解更多

查看 属性 了解更多

查看 事件 了解更多

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

查看 api 了解更多

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

查看 插件 了解更多

富文本插件	欢喜商城	多么生活	米兔旅行	全品作业小助手	古典文学名著阅读

食法查	APP 比比	源创智造	程序员技术之旅	Geek 时代	典典博客

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

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

• 支持
  

• v2.0.4 (20210131)

  1. A editable 插件增加下划线和图片超链接的功能 详细
  2. U 支付宝和头条小程序原生包直接通过 template 递归实现渲染
  3. F 修复了 img 标签设置 data-src 可能导致图片不显示的问题 详细
  4. F 修复了 script 标签中的 < 会被解析为标签的问题 详细
  5. F 修复了 uni-app 包的 app 端播放视频时可能高度突然变小的问题
  6. F 修复了 uni-app 包的 app 端长按图片会报错的问题
  7. F 修复了 uni-app 包的 nvue 端使用 editable 插件后无法显示的问题
  8. F 修复了 editable 插件删除图片和切换内容时可能出现错误选择框的问题
  9. F 修复了 editable 插件无法编辑链接文本内容的问题

• v2.0.3 (20210115)

  1. U 图片被点击时不冒泡（可以与整体的点击区分开，不影响链接中的图片）
  2. F 修复了图片链接缺省协议名时可能无法预览的问题
  3. F 修复了原生包 video 和 audio 标签内放置文本会报错的问题
  4. F 修复了 editable 插件清空内容时弹窗可能不消失的问题
  5. F 修复了 highlight 插件部分情况下样式不正确的问题 详细
  6. F 修复了文档首页跳转到快速开始页时 404 的问题 by @AnsonZnl

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

查看 更新日志 了解更多