【记一记】h5移动端和小程序富文本渲染和富文本解决方案mp-html组件使用记录

背景：公司需要开发一款同平台的社区论坛小程序，因为公司有一套社区h5项目，线上也在运行。考虑到跨平台兼容性问题，需要考虑以下几点：

历史帖子在小程序的正常渲染（图片，视频，文本等）。
历史帖子中的图片预览和链接点击跳转处理
h5和后台发帖小程序能够1:1还原内容。
小程序用户发帖在h5移动端和web后台能显示。

主要技术用的是uni-app 富文本组件使用的是mp-html

介绍 mp-html

mp-html 官网

多端支持，支持编辑、扩展等，刚好可以满足我的以上需求所以选择了这个库来使用。功能非常丰富，各位大佬可自行探索。

导入项目

因为我使用vs code开发所以使用yarn来安装

npm 方式安装

js 复制代码

# 通过 npm 获取
npm install mp-html
# 或通过 yarn 获取
yarn add 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

好啦，下面我们就可以愉快的使用这个组件啦。

如上一系列猛如虎的操作还是只第一步，他只完成了一个v-html的功能。如果我们需要使用到富文本的编辑功能，那我们要深入的来看一下这个组件提供出来的api和进阶使用。

进阶使用插件

editable 富文本插件咱们先注意一段官网原话。因为我是通过yarn安装的，所以我们看npm方式下面的第2点，下面我将介绍一下如何使用这个插件

添加editable插件

vue 复制代码

 <mpHtml :editable="true"> </mpHtml>

此时这样配置会发现页面中的mpHtml组件依旧不能编辑输入，我们先找到项目中node_modules->mp-html->tools->config.js

放开plugins数组中的editable注释

修改完成后，可按以下步骤生成新的组件包替换掉原来的dist文件就可以啦

📦 生成组件包

安装依赖

bash 复制代码

# 通过 npm 安装 
npm install 
# 或通过 yarn 安装 
yarn

生成代码包到 dist 文件夹

bash 复制代码

# 生成微信包到 dist/mp-weixin 
yarn build:weixin 
# 生成 qq 包到 dist/mp-qq 
yarn build:qq 
# 生成百度包到 dist/mp-baidu 
yarn build:baidu 
# 生成支付宝包到 dist/mp-alipay 
yarn build:alipay 
# 生成头条包到 dist/mp-toutiao 
yarn build:toutiao 
# 生成 uni-app 包到 dist/uni-app 
yarn build:uni-app 
# 生成所有包
yarn build

在 mp-html 文件夹下执行

我们在node_modules/mp-html下打开终端

注意打包需要用到gulp没有安装的可以先安装一下

安装好gulp我们直接执行yarn命令安装好依赖后在执行yarn build或者yarn build:xx生成指定小程序组件包

package.json 复制代码

"scripts": {
    "build:weixin": "gulp build --mp-weixin",
    "build:qq": "gulp build --mp-qq",
    "build:baidu": "gulp build --mp-baidu",
    "build:alipay": "gulp build --mp-alipay",
    "build:toutiao": "gulp build --mp-toutiao",
    "build:uni-app": "gulp build --uni-app",
    "build": "gulp build --mp-weixin & gulp build --mp-qq & gulp build --mp-baidu & gulp build --mp-alipay & gulp build --mp-toutiao & gulp build --uni-app",
    "dev:weixin": "gulp dev --mp-weixin --dev",
    "dev:qq": "gulp dev --mp-qq --dev",
    "dev:baidu": "gulp dev --mp-baidu --dev",
    "dev:alipay": "gulp dev --mp-alipay --dev",
    "dev:toutiao": "gulp dev --mp-toutiao --dev",
    "dev:uni-app": "gulp dev --uni-app --dev",
  }

我执行的yarn build生成全部的组件包

回到项目重心运行一下就发现可以进行编辑啦

使用小妙招

如果我们需要完成上传图片、视频、新增文本片段的情况，就需要对组件实例进行操作了。如上图也描述了、插入图片、音视频、链接或修改链接我们需要初始化组件实例的getSrc方法

vue 复制代码

<template>
    <mpHtml :editable="true" ref="article"> </mpHtml>
</template>
<script>
export default {
  mounted() {
    this.$refs.article.getSrc = this.getSrc;
  },
  methods: {
     getSrc(type, value) {
        return new Promise(async (resolve, reject) => {
            // 以图片为例
            if (type == "img") {
              uni.chooseImage({
                count: 1,
                success: (res) => {
                  (async () => {
                    const arr = [];
                    for (let item of res.tempFilePaths) {
                      // 依次上传 upload是将资源上传到服务拿到url返回
                      const src = await this.upload(item, "image");
                      arr.push(src);
                    }
                    return arr;
                  })().then((res) => {
                    resolve(res);
                  });
                },
                fail: reject,
              });
            }
            if (type === "link") {
              return resolve("请输入url");
            }
         });
     }
  }
}
</script>

咱们可以看一下源码，位置node_modules->mp-html->plugins->editable->uni-app->index.js咱们拿插入图片方法举例，调用组件实例上面的getSrc方法传入插入的类型，然后.then那么我们的getSrc必须返回一个Promise，且将处理好的的数据resolve出来,返回的数据可以是String或者Array。