如何在按钮单击时将干净的HTML复制到剪贴板？

问题描述：

我想单击按钮时将图像复制到剪贴板，但是当我粘贴它时，它始终有我想要删除的style="..."。如何在按钮单击时将干净的HTML复制到剪贴板？

function copy(selector) { 
    var $temp = $("<div>"); 
    $("body").append($temp); 
    $temp.attr("contenteditable", true) 
    .html($(selector).html()) 
    .select() 
    .on("focus", function() { document.execCommand('selectAll', false, null); }) 
    .focus(); 
    document.execCommand("copy"); 
    $temp.remove(); 
}

下面是HTML：

<p id="demo"><img src="/picture/img.jpg" alt="img"></p> 
<button onclick="copy('#demo')">Copy Keeping Format</button>

当我点击该按钮，如TinyMCE的它显示的图像将其粘贴到网页的文本编辑器，但是当我打开源代码有style="..."我显然不需要：

<img src="/picture/img.jpg" alt="noname" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: #454545; font-family: 'Helvetica Neue', Roboto, Arial, 'Droid Sans', sans-serif; font-size: 13px; background-color: #f9f9f9;" />

我如何将其粘贴只是以下？

<img src="/picture/img.jpg" alt="noname"/>

我如何检查数据将被复制？

console.log() // what var to print to check the data that will be copy by execcommand

UPDATE

我试着右击图像，并选择复制图像并将其粘贴到文本编辑器和查看源代码，并获得干净的IMG HTML没有style="..."所以它不是文本编辑器加上style="..."对不对？

'$ temp.removeAttr（ “风格”）' – mplungjan

@mplungjan我猜的风格属性由TinyMCE的编辑器添加，没有？ –

如果它不在临时对象上，那么是的 – mplungjan

答

如果TinyMCE的问题确实存在，那么您可能希望仅为图像启用粘贴过滤器。在将HTML放入编辑器之前，您可以捕捉到HTML，并根据需要做任何事情。

https://www.tinymce.com/docs/plugins/paste/#paste_preprocess

谢谢你的工作，清理风格 –

如何在按钮单击时将干净的HTML复制到剪贴板？

相关推荐