问题:
从 Outlook 复制电子邮件并粘贴到 kolkov/angular-editor ( https://angular-editor-wysiwyg.stackblitz.io/ ) 图像内容已加载但不可见,因为 innerHTML 中的 img 标记包含 src 路径作为文件: ///C:/xxxx/xxxx/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif。
控制台:
拒绝加载图像'file:///C:/xxxx/xxxx/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif',因为它违反了以下内容安全策略指令:“img-src * data :blob:'不安全内联'”。
尝试了可能的解决方案:
将 src 路径转换为 base64 并且在粘贴时不显示确切的图像
this.editor.textArea.nativeElement.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
let text = (e.originalEvent || e).clipboardData.getData('text/html');
const div = document.createElement('div')
div.innerHTML = text
const firstImage = div.getElementsByTagName('img')[0]
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = firstImage.width;
canvas.height = firstImage.height;
// Draw the image
ctx.drawImage(firstImage, 0, 0);
const dataURL = canvas.toDataURL('image/jpeg');
document.execCommand("insertHTML", false, text.replace(firstImage.src,data));
});
},100)
我可以看到一些付费的富文本编辑器,例如 CKEditor5,如果我复制粘贴 Outlook 邮件内容,它可以正常工作,并且图像显示在粘贴图像时,此编辑器调用上传 API 有效负载以二进制格式发送,作为响应,它提供HTTPS 图像 URL 路径,并将 src 替换为该路径。
在 kolkov/angular-editor 上有这个问题的解决方案吗?
这就是它在编辑器中的外观。