功能介绍

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

查看功能介绍了解更多

使用方法

原生平台

npm 方式

在项目目录下安装组件包

npm install mp-html

开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm

在需要使用页面的 json 文件中添加

{"usingComponents": {"mp-html": "mp-html"}
}

在需要使用页面的 wxml 文件中添加
```
<mp-html content="{{html}}" />
```

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

如果在 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	获取所有图片的数组

查看 api 了解更多

插件扩展

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

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

查看插件了解更多

官方地址

移步资源

微信小程序富文本组件mp-html相关推荐

微信小程序富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件掌握使用微信小程序的表单组件掌握使用微信小程序的form表单及如何提交数据掌握使用微信小程序的导航及跳转组件一.基础内容组件 1.1 ...
微信小程序富文本组件wxParse
项目地址:https://github.com/icindy/wxParse 1 打开项目地址,下载项目文件 2 将wxParse文件夹粘贴到项目 3 新建页面 "pages/home/ri ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
微信小程序富文本修改图片的大小
一.先言有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式. 二. ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...

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