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

Posted 2023-03-22

【中文标题】如何在单击按钮时将干净的 HTML 复制到剪贴板？

【英文标题】：How do I copy clean HTML to clipboard on button click?

【发布时间】：2018-05-01 23:36:18

【问题描述】：

我想在单击按钮时将图像复制到剪贴板，但是当我粘贴它时，它总是有我想要删除的 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" ></p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

当我单击按钮并将其粘贴到 Web 文本编辑器（如 TinyMCE）中时，它会显示图像，但当我打开源代码时，它有 style="..."，我显然不需要：

<img src="/picture/img.jpg"  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" />

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

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

更新

我尝试右键单击图像并选择复制图像并将其粘贴到文本编辑器并检查源代码并在没有style="..." 的情况下获得干净的img html，所以它不是文本编辑器添加style="..." 对吗？

【问题讨论】：

$temp.removeAttr("style")

@mplungjan 我猜style属性是tinymce编辑器添加的吧？！

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

@mplungjan 我应该把 removeAttr 放在哪里？我试着把它放在 contenteditable 不起作用之前

在 document.execCommand("copy"); 之前

【参考方案1】：

如果问题确实出在 TinyMCE 端，您可能希望使用仅为图像启用的粘贴过滤器。您将能够在将 HTML 放入编辑器之前对其进行捕捉，并对其进行任何操作。

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