WangEditor插入带请求头图片的解决方案
在使用WangEditor富文本编辑器时，插入需要请求头的图片是一个常见难题。直接使用接口地址往往导致图片无法显示，因为WangEditor本身不处理请求头。本文提供解决方案。
问题：开发者尝试使用customInsert方法直接插入图片下载接口（例如/file/dwn2?fileName=），但由于接口需要请求头，图片无法加载。 即使尝试下载到本地再获取Blob URL也无效。
解决方案：关键在于不能直接将接口地址传递给WangEditor。 正确的做法是：
-
使用
fetch或axios等方法，在customInsert函数中，携带必要的请求头向服务器发起请求。 这步获取图片的二进制数据（Blob）。 -
将获取到的Blob数据转换成DataURL。 DataURL是WangEditor能够识别的图片格式。
-
使用
insertImg方法将DataURL插入到编辑器中。
示例代码（使用fetch）：
editor.customInsert = function(file, insertFn) {
const url = '/file/dwn2?fileName=' + file.name;
const headers = { // 你的请求头
'Authorization': 'Bearer your_token',
// ... other headers
};
fetch(url, { headers })
.then(response => response.blob())
.then(blob => {
const reader = new FileReader();
reader.onloadend = function() {
insertFn(reader.result); // 将DataURL传递给insertFn
};
reader.readAsDataURL(blob);
})
.catch(error => {
console.error('图片加载失败:', error);
});
};
请替换/file/dwn2?fileName=为你的实际接口地址，并根据你的接口需求填写正确的请求头headers。 这个示例代码展示了如何使用fetch API，你也可以根据需要使用axios或其他方法。
记住查阅WangEditor官方文档，了解自定义图片插入的详细配置和示例，以便更好地集成此功能。 这将确保你的代码与WangEditor的最新版本兼容，并获得最佳性能。
