mp-html

v2.5.0

Published

8 months ago

小程序富文本组件

Downloads

1,543

0High
0Medium
0Low

tjwhale

miniprogram rich-text html

mp-html

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

star forks downloads license

功能介绍

支持在多个主流的小程序平台和 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

源码方式

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

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

在项目目录下安装组件包
```
npm install mp-html
```

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

查看快速开始了解更多

组件属性

| 属性 | 类型 | 默认值 | 说明 | |:---:|:---:|:---:|---| | 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 | 链接被点击时 |

查看事件了解更多

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 | | card | 卡片展示 by @whoooami |

查看插件了解更多

许可与支持

许可
您可以免费的使用（包括商用）、复制或修改本组件 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 的升级方法可见更新指南

查看更新日志了解更多

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

mp-html

功能介绍

使用方法

原生平台

uni-app

组件属性

组件事件

api

插件扩展

许可与支持

更新日志