uniapp+微信小程序+vue3 实现富文本编辑器遇到的坑

 

问题一：富文本编辑器初始化实例出不来，有两个原因：

1. 找的参考代码不适用微信小程序，需要用.in(this)

uni.createSelectorQuery()
          .in(this)
          .select("#editor")
          .context(res => {
              this.editorCtx = res?.context;
          }).exec()

 

2. 这里会用到大量的this和当前实例，然而script setup里面没有this,也拿不到当前实例。所以得改成选项式API

 

问题二：编辑器工具栏不显示

uniapp文档示例代码是不完整的，编辑器工具栏需要手动写代码实现，然后调EditorContext下的api来实现功能。比如，插入日期、插入图片、撤销、重做等，更基础的功能在EditorContent.format下

 

问题三：插入图片

官方示例代码没问题，问题在于上传服务器。

上传服务器时，如果需要formData binary这种数据，uniapp和微信小程序是拿不到的，它只能拿到base64和二进制流。而我的后端只能接受formData binary。原因大概是他用的那个图片上传框架系统oss。

解决办法：

网上找了好久，终于，找到一篇可用的，思路是，既然微信小程序不提供FormData构造函数，那就自己造轮子，当然这个轮子有网上的大神造好了，直接copy过来就行。

根据文章指引，创建new FormData()来获得formData binary格式的数据。就好了。

 

问题四：预览图片

预览图片的问题是因为后端用的那个oss系统，图片url不是固定的，可能会变，需要拿objectName(大意是文件名)去掉一个预览接口来获取最新的图片url地址。

解决办法：

插入图片分为2步：1. 选择图片uni.ChooseMedia，2.调用编辑器实例的insertImage方法插入

在1和2之间插入一步，如下：

在用户插入图片时，立即调上传接口拿到objectName（否则没有这个东西）， 调insertImage时，作为data传入。它会被生成到img标签上的自定义属性里面。这一步备用。

预览时，用正则匹配img标签代码和objectName，调预览获取url的接口（它需要传objectName），拿到url,重新拼一个img标签返回。

这里又有个小坑，replace方法的第二个参数function里面直接异步的话返回的是一个promise，而不是想要的那种结果。

这时做两次replace，第一次收集promise，让它执行。

第二次直接用promise.all的结果来替换。

直接上代码：

    async getImgUrl(objectName) {
      const data = await request.getOssFile(objectName)
      return data.url;
    },

    async onView() {
      const viewHtml = this.editorHtml;
      const promises = [];
      const regImg = /(<img.*?\s.*?data-custom=\"objectName=(.*?)\">)/g
      viewHtml.replace(regImg, ($0, $1, $2) => {
        const promise = this.replaceImgAsync($2);
        promises.push(promise)
      })
      const data = await Promise.all(promises);
      this.viewHtml = viewHtml.replace(regImg, () => data.shift())
    },

    async replaceImgAsync(objectName) {
      const newUrl = await this.getImgUrl(objectName)
      return `<img src="${newUrl}" data-custom="objectName=${objectName}" />`
    }