Skip to content

小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用

License

Notifications You must be signed in to change notification settings

jin-yufeng/mp-html

Repository files navigation

mp-html

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

star forks npm downloads Coverage Status license JavaScript Style Guide

功能介绍

  • 支持在多个主流的小程序平台和 uni-app 中使用
  • 支持丰富的标签(包括 tablevideosvg 等)
  • 支持丰富的事件效果(自动预览图片、链接处理等)
  • 支持设置占位图(加载中、出错时、预览时)
  • 支持锚点跳转、长按复制等丰富功能
  • 支持大部分 html 实体
  • 丰富的插件(关键词搜索、内容编辑、latex 公式等)
  • 效率高、容错性强且轻量化(≈25KB9KB 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 目录下,否则无法运行

查看 快速开始 了解更多

组件属性

属性 类型 默认值 说明
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

查看 插件 了解更多

使用案例

官方示例 欢喜商城 多么生活 食法查 微慕 古典文学名著阅读
富文本插件 欢喜商城 多么生活 食法查 微慕 古典文学名著阅读
科学复习 程序员技术之旅 典典博客 优秀笔记 365 刷题 同城共享书
科学复习 程序员技术之旅 典典博客 优秀笔记 365刷题 同城共享书
技术源 share 你的代码写的真棒 谛否 小莫唐尼 模版演示 AI瓦力
技术源share 你的代码写的真棒 谛否 小莫唐尼 MiniProgram模版演示 AI瓦力

以上排名不分先后,更多可见 使用案例收集(欢迎添加)

许可与支持

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

  • 联系
    欢迎加入 QQ 交流群:
    群1(已满):699734691
    群2(已满):778239129
    群3:960265313
    group

  • 支持
    支持

更新日志

  • 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-apph5app 端部分情况下样式无法识别的问题 详细
    8. F 修复了 latex 插件部分情况下显示不正确的问题 详细
    9. F 修复了 editable 插件表格无法删除的问题
    10. F 修复了 editable 插件 uni-appvue3 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-appeditableaudio 插件共用时点击 audio 无法编辑的问题 详细 by @whoooami
    7. F 修复了支付宝小程序设置了宽高的图片可能显示不正常的问题 详细
    8. F 修复了 uni-app 包微信小程序部分情况下图片会报错 replace of undefined 的问题
    9. F 修复了 uni-app 包快手小程序图片不显示的问题 详细

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

查看 更新日志 了解更多