功能介绍
全端支持（含 v3、NVUE）
支持丰富的标签（包括 table、video、svg 等）
支持丰富的事件效果（自动预览图片、链接处理等）
支持设置占位图（加载中、出错时、预览时）
支持锚点跳转、长按复制等丰富功能
支持大部分 html 实体
丰富的插件（关键词搜索、内容编辑、latex 公式等）
效率高、容错性强且轻量化
使用方法
uni_modules 方式
点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/mp-html 目录下
在需要使用页面的 (n)vue 文件中添加
- <!-- 不需要引入，可直接使用 -->
- <mp-html :content="html" />
需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可
- export default {
- data() {
- return {
- html: '<div>Hello World!</div>'
- }
- }
- }
源码方式
从 github 或 gitee 下载源码
插件市场的 非 uni_modules 版本 无法更新，不建议从插件市场获取
在需要使用页面的 (n)vue 文件中添加
- <mp-html :content="html" />
- import mpHtml from '@/components/mp-html/mp-html'
- export default {
- // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
- components: {
- mpHtml
- },
- data() {
- return {
- html: '<div>Hello World!</div>'
- }
- }
- }
npm 方式
在项目根目录下执行
npm install mp-html
在需要使用页面的 (n)vue 文件中添加
- <mp-html :content="html" />
需要更新版本时执行以下命令即可
- import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
- export default {
- // 不可省略
- components: {
- mpHtml
- },
- data() {
- return {
- html: '<div>Hello World!</div>'
- }
- }
- }
npm update mp-html
使用 cli 方式运行的项目，通过 npm 方式引入时，需要在 vue.config.js 中配置 transpileDependencies，详情可见 #330
如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行
小程序端使用方式：
（1）下载的mp-html找到对应平台的代码放到小程序的components下
（2）在需要使用的页面的json里添加代码：
（3）在需要使用的地方调用：
- "usingComponents": {
- "mp-html": "/components/mp-html/index"
- },
更多mp-html插件使用方法参考：https://ext.dcloud.net.cn/plugin?id=805
- <mp-html content="{{content}}"></mp-html>
文章点评