坑一：回顯問(wèn)題

富文本組件：

    <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回顯富文本區(qū)域
          html,
          success: function (res: any) {
          },
          fail: function (fail: any) {
          },
          complete: function (bbxx: any) {
          }
        })
      }).exec()
    },

bug復(fù)現(xiàn)：

數(shù)據(jù)："<p>杰佛的撒嬌佛是阿達(dá)分階段實(shí)施的佛教的撒<img src="data:image/jpeg;base64,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" alt="" width="344" height="340" />發(fā)動(dòng)機(jī)撒佛啊但是佛教的撒發(fā)的撒嬌佛就是發(fā)撒嬌的佛菩薩</p>"

當(dāng)字符串中包含base64圖片，且base64圖片超過(guò)1024kb就會(huì)被微信機(jī)制攔截下來(lái)（官方文檔有說(shuō)明）導(dǎo)致整個(gè)組件無(wú)法正常渲染，包括img標(biāo)簽前的文字

解決方案（三種）

1：和后端協(xié)調(diào)，將base64轉(zhuǎn)為在線url地址（例如oss地址），完美解決

2：對(duì)于性能考慮，如果是雙端（pc+移動(dòng)），建議做文件大小判斷，文件過(guò)大的話建議提示到pc端查看或操作

再數(shù)據(jù)初始化的時(shí)候，先調(diào)用如下方法，獲得該字符串的實(shí)際大小，然后在按需處理，下面做具體舉例

 getStringSize(str: string) {
      var myString = str;
      // 使用 TextEncoder 將字符串編碼為字節(jié)數(shù)組
      var textEncoder = new TextEncoder();
      var encodedData = textEncoder.encode(myString);
      // 計(jì)算字節(jié)數(shù)
      var byteSize = encodedData.length;
      // 將字節(jié)數(shù)轉(zhuǎn)換為 KB
      var kbSize = Math.floor(byteSize / 1024);
      return kbSize
    },

const str = '你要渲染的富文本字符串'

const realSize = this.getStringSize(str)

if(realSize >=1024) {
    提示用戶，該文本域內(nèi)存在較大圖片，請(qǐng)到pc端查看
} else {
    this._onEditorReady(str)
}

3：將base64轉(zhuǎn)為本地url以此繞過(guò)大小攔截并成功渲染

非得渲，那就渲吧，思路就是base64有實(shí)際大小會(huì)被檢測(cè)到，處于項(xiàng)目原因又不能使用線上url，那就將base64轉(zhuǎn)本地url再替換渲染字符串中的base64，就可以完美繞開(kāi)大小檢測(cè)，下面做具體舉例

 base64ToUrl(base64Data: string, name: string) {
      // 保存的文件名(考慮一個(gè)string內(nèi)可能有多個(gè)img標(biāo)簽，使用隨機(jī)數(shù)確保name唯一)
      const FILE_BASE_NAME = 'temp_base64_image' + name + Math.floor(Math.random() * 90);                     
      // 將 base64 數(shù)據(jù)寫入本地文件
      const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
      fsm.writeFileSync(filePath, base64Data, 'base64');
      // 獲取本地圖片 URL
      return filePath;
    },

    // 替換字符串中的<img>標(biāo)簽中的base64為本地URL
    replaceBase64WithLocalUrl(inputString: string, name: string) {
      const regex = /<img\s+src="data:image\/[^;]+;base64,([^"]+)"/g; //獲取base64數(shù)據(jù)區(qū)間
      // 將base64區(qū)間替換為本地圖片url繞過(guò)setdata1024kb檢測(cè)
      const replacedString = inputString.replace(regex, (match, base64Data) => { 
        const localImageUrl = this.base64ToUrl(base64Data, name);
        return `<img src="${localImageUrl}"`;
      });
      return replacedString;
    },

const str = '你要渲染的富文本字符串'

str = this.replaceBase64WithLocalUrl(str)

this._onEditorReady(str)

坑二：回顯圖片樣式問(wèn)題

這下圖片能正?；仫@了，無(wú)論圖片多大多小，但是偶爾有一些超大圖會(huì)有寬高比例失調(diào)原因，第一種方案是用正則給所有img標(biāo)簽設(shè)置style="?width:100%;height:100%;object-fit: cover;"也好，設(shè)置style="?width:100%;height:auto;"也罷，總之就是不行，于是翻查文檔發(fā)現(xiàn)

img中如果存在行內(nèi)style（自帶、后臺(tái)配置），那么自己寫的style將會(huì)被覆蓋，所以正確的方法是給所有img標(biāo)簽設(shè)置class ，下面做具體示例

this._onEditorReady(str.replace(/<img/g, '<img class="rich-img" '))

.rich-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

至此，所有坑填完

生命不息，學(xué)習(xí)不止，鍵盤敲爛，月薪過(guò)萬(wàn)！加油，代碼人！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-716301.html

到了這里，關(guān)于[微信小程序踩坑]微信小程序editor富文本組件渲染字符串時(shí)，內(nèi)部圖片超出大小導(dǎo)致無(wú)法正常渲染或回顯(數(shù)據(jù)傳輸長(zhǎng)度為 3458 KB，存在有性能問(wèn)題！)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！