0

问题:
从 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 上有这个问题的解决方案吗?

这就是它在编辑器中的外观。

在此处输入图像描述

4

0 回答 0