WangEditor富文本編輯器如何插入需要請求頭的圖片？

WangEditor插入帶請求頭圖片的解決方案

在使用WangEditor富文本編輯器時，插入需要特定請求頭的圖片是一個常見問題。例如，圖片下載接口可能需要身份驗證等請求頭才能正常訪問。直接使用圖片URL插入會導致圖片無法顯示。本文提供一種解決方法。

問題：開發者嘗試直接使用下載接口URL插入圖片，代碼如下：

customInsert: (insertImg, result, editor) => {     insertImg(process.env.vue_APP_BASE_API + '/file/dwn2?fileName=' + result[0])})

由于/file/dwn2接口需要請求頭，圖片無法加載。嘗試下載到本地再插入也無效。

解決方案：在插入圖片前，使用正確的請求頭獲取圖片數據，然后以合適的格式(例如base64或Blob)傳遞給WangEditor的insertImg方法。這需要理解WangEditor的API和圖片上傳機制。 官方文檔提供了圖片上傳和自定義插入的詳細配置，仔細閱讀可找到解決方法。

步驟：

1. 發送帶請求頭的請求： 使用fetch或axios等方法，發送請求到圖片下載接口，并包含必要的請求頭(例如Authorization)。

2. 處理響應： 獲取響應中的圖片數據。

3. 轉換為合適的格式： 將圖片數據轉換為base64或Blob格式。 base64編碼適合小圖片，Blob適合大圖片，避免內存溢出。

4. 使用insertImg插入： 將轉換后的圖片數據傳遞給WangEditor的insertImg方法。 如果使用base64，直接傳入base64字符串；如果使用Blob，則需要創建一個FileReader對象讀取Blob并將其轉換為base64后再傳入。

示例代碼（使用fetch和base64）： (請根據實際接口和請求頭進行調整)

customInsert: async (insertImg, result, editor) => {   const url = process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + result[0];   const response = await fetch(url, {     headers: {       'Authorization': 'Bearer your_token' // 替換為你的token     }   });   const blob = await response.blob();   const reader = new FileReader();   reader.onloadend = () => {     const base64 = reader.result;     insertImg(base64);   };   reader.readAsDataURL(blob); };

通過以上步驟，可以正確地將需要請求頭的圖片插入到WangEditor富文本編輯器中。 記住查閱WangEditor官方文檔，以獲取更詳細的API和配置信息。