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和配置信息。