[微信小程序踩坑]微信小程序editor富文本组件渲染字符串时，内部图片超出大小导致无法正常渲染或回显(数据传输长度为 3458 KB，存在有性能问题！)

坑一：回显问题

富文本组件：

    <editor id="editor" name="{{name}}" style="font-size: 28rpx;color: #C9CDD4" read-only="{{true}}" placeholder="{{placeholder}}"  bind:input="onChange11" >editor>

回显方法：

 _onEditorReady: function (html: any) {
      const that = this as any
      that.createSelectorQuery().select('#editor').context(async function (res: any) {
        that.editorCtx = res.context
        await that.editorCtx.setContents({ //将html回显富文本区域
          html,
          success: function (res: any) {
          },
          fail: function (fail: any) {
          },
          complete: function (bbxx: any) {
          }
        })
      }).exec()
    },

bug复现：

数据："

杰佛的撒娇佛是阿达分阶段实施的佛教的撒发动机撒佛啊但是佛教的撒发的撒娇佛就是发撒娇的佛菩萨

"

当字符串中包含base64图片，且base64图片超过1024kb就会被微信机制拦截下来（官方文档有说明）导致整个组件无法正常渲染，包括img标签前的文字

解决方案（三种）

1：和后端协调，将base64转为在线url地址（例如oss地址），完美解决

2：对于性能考虑，如果是双端（pc+移动），建议做文件大小判断，文件过大的话建议提示到pc端查看或操作

再数据初始化的时候，先调用如下方法，获得该字符串的实际大小，然后在按需处理，下面做具体举例

 getStringSize(str: string) {
      var myString = str;
      // 使用 TextEncoder 将字符串编码为字节数组
      var textEncoder = new TextEncoder();
      var encodedData = textEncoder.encode(myString);
      // 计算字节数
      var byteSize = encodedData.length;
      // 将字节数转换为 KB
      var kbSize = Math.floor(byteSize / 1024);
      return kbSize
    },

const str = '你要渲染的富文本字符串'
 
const realSize = this.getStringSize(str)
 
if(realSize >=1024) {
    提示用户，该文本域内存在较大图片，请到pc端查看
} else {
    this._onEditorReady(str)
}

3：将base64转为本地url以此绕过大小拦截并成功渲染

非得渲，那就渲吧，思路就是base64有实际大小会被检测到，处于项目原因又不能使用线上url，那就将base64转本地url再替换渲染字符串中的base64，就可以完美绕开大小检测，下面做具体举例

 base64ToUrl(base64Data: string, name: string) {
      // 保存的文件名(考虑一个string内可能有多个img标签，使用随机数确保name唯一)
      const FILE_BASE_NAME = 'temp_base64_image' + name + Math.floor(Math.random() * 90);                     
      // 将 base64 数据写入本地文件
      const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
      fsm.writeFileSync(filePath, base64Data, 'base64');
      // 获取本地图片 URL
      return filePath;
    },
 
    // 替换字符串中的标签中的base64为本地URL
    replaceBase64WithLocalUrl(inputString: string, name: string) {
      const regex = /; //获取base64数据区间
      // 将base64区间替换为本地图片url绕过setdata1024kb检测
      const replacedString = inputString.replace(regex, (match, base64Data) => { 
        const localImageUrl = this.base64ToUrl(base64Data, name);
        return `${localImageUrl}"`;
      });
      return replacedString;
    },

const str = '你要渲染的富文本字符串'
 
str = this.replaceBase64WithLocalUrl(str)
 
this._onEditorReady(str)

坑二：回显图片样式问题

这下图片能正常回显了，无论图片多大多小，但是偶尔有一些超大图会有宽高比例失调原因，第一种方案是用正则给所有img标签设置style=" width:100%;height:100%;object-fit: cover;"也好，设置style=" width:100%;height:auto;"也罢，总之就是不行，于是翻查文档发现

img中如果存在行内style（自带、后台配置），那么自己写的style将会被覆盖，所以正确的方法是给所有img标签设置class ，下面做具体示例

this._onEditorReady(str.replace(/, '))
 
.rich-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

至此，所有坑填完

---

生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！