如何在按鈕單擊時將乾淨的HTML複製到剪貼板？

Question

我想單擊按鈕時將圖像複製到剪貼板，但是當我粘貼它時，它始終有我想要刪除的style="..."。

我使用了another Stack Overflow question的功能。

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="..."對不對？

Answer 1

如果TinyMCE的問題確實存在，那麼您可能希望僅爲圖像啓用粘貼過濾器。在將HTML放入編輯器之前，您可以捕捉到HTML，並根據需要做任何事情。

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