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

更新

我尝试右键单击图像并选择复制图像并将其粘贴到文本编辑器并检查源代码并获得干净的img html而不使用style="..."因此不是文本编辑器添加style="..."对吗？

Answer 1

如果问题确实存在于TinyMCE的末尾，您可能希望使用仅为图像启用的粘贴过滤器。在将HTML放入编辑器之前，您将能够捕获HTML并随意执行任何操作。

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

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

1 个答案: