mp-html

mp-html是一个强大的小程序富文本组件

功能介绍支持在多个主流的小程序平台和 uni-app 中使用支持丰富的标签（包括 table、video、svg 等）支持丰富的事件效果（自动预览图片、链接处理等）支持设置占位图（加载中、出错时、预览时）支持锚点跳转、长按复制等丰富功能支持大部分 html 实体丰富的插件（关键词搜索、内容编辑、latex 公式等）效率高、容错性强且轻量化（≈25KB，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>' }) } })源码方式将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html在需要使用页面的 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 目录下，否则无法运行

开源地址：