您现在的位置是:首页 >技术交流 >微信小程序富文本组件mp-html网站首页技术交流

微信小程序富文本组件mp-html

a阿冲 2024-06-17 11:28:01
简介微信小程序富文本组件mp-html

功能介绍

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

查看 功能介绍 了解更多

使用方法

原生平台

  • npm 方式

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

      npm install mp-html
      
      开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm
    2. 在需要使用页面的 json 文件中添加

    3. {
        "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 文件中添加

    3. {

        "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>

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

查看 快速开始 了解更多

组件属性

属性类型默认值说明
container-styleString容器的样式(2.1.0+
contentString用于渲染的 html 字符串
copy-linkBooleantrue是否允许外部链接被点击时自动复制
domainString主域名(用于链接拼接)
error-imgString图片出错时的占位图链接
lazy-loadBooleanfalse是否开启图片懒加载
loading-imgString图片加载过程中的占位图链接
pause-videoBooleantrue是否在播放一个视频时自动暂停其他视频
preview-imgBooleantrue是否允许图片被点击时自动预览
scroll-tableBooleanfalse是否给每个表格添加一个滚动层使其能单独横向滚动
selectableBooleanfalse是否开启文本长按复制
set-titleBooleantrue是否将 title 标签的内容设置到页面标题
show-img-menuBooleantrue是否允许图片被长按时显示菜单
tag-styleObject设置标签的默认样式
use-anchorBooleanfalse是否使用锚点链接

查看 属性 了解更多

组件事件

名称触发时机
loaddom 树加载完毕时
ready图片加载完毕时
error发生渲染错误时
imgtap图片被点击时
linktap链接被点击时

查看 事件 了解更多

api

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

名称作用
in将锚点跳转的范围限定在一个 scroll-view 内
navigateTo锚点跳转
getText获取文本内容
getRect获取富文本内容的位置和大小
setContent设置富文本内容
imgList获取所有图片的数组

查看 api 了解更多

插件扩展

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

名称作用
audio音乐播放器
editable富文本编辑
emoji解析 emoji
highlight代码块高亮显示
markdown渲染 markdown
search关键词搜索
style匹配 style 标签中的样式
txv-video使用腾讯视频

查看 插件 了解更多

官方地址

移步资源

 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。