javascript - 复制到剪贴板并维护电子邮件签名的 HTML 元素

Question

我正在制作一个基本的电子邮件签名页面，我希望能够使用“复制到剪贴板”按钮/命令。

我让它工作，虽然它没有粘贴准备好包含在 outlook 或 mac 邮件中的格式化图形，而是粘贴了实际的 html。例如

<table width="100%" cellspacing="0" cellpadding="0" border="0" ...

我的代码在下面，非常感谢您提供一些指导。

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  document.execCommand("copy");
  $temp.remove();
  $("#success").slideDown("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="email-signature" style="border-bottom: 1px solid #000; padding: 10px 0; margin-bottom: 10px;"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; color: #000; font-weight: bold;">
Name of Person
</td>
</tr>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 17px; color: #000; ">
<a href="mailto:email@example.com">email@example.com</a>
</td>
</tr>


<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example.com"><img src="http://www.example.com/logo.gif" alt="Name of Business" width="100" height="100"></a>
</td>
</tr>

</tbody>

</table>

</div>

<button onclick="copyToClipboard('#email-signature')">Copy to Clipboard</button>

<div id="success" style="display:none; border: 1px solid red; padding:10px; margin-top: 10px;"><strong>Success</strong></div>

Answer 1

您需要指示浏览器在 copy 事件触发时将文本作为 text/html 传递。我修改了您的代码片段以包含此功能。

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  var str = $(element).html();

  function listener(e) {
         e.clipboardData.setData("text/html", str);
         e.clipboardData.setData("text/plain", str);
         e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);

  $temp.remove();
  $("#success").slideDown("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="email-signature" style="border-bottom: 1px solid #000; padding: 10px 0; margin-bottom: 10px;"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; color: #000; font-weight: bold;">
Name of Person
</td>
</tr>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 17px; color: #000; ">
<a href="mailto:email@example.com">email@example.com</a>
</td>
</tr>


<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example.com"><img src="http://www.example.com/logo.gif" alt="Name of Business" width="100" height="100"></a>
</td>
</tr>

</tbody>

</table>

</div>

<button onclick="copyToClipboard('#email-signature')">Copy to Clipboard</button>

<div id="success" style="display:none; border: 1px solid red; padding:10px; margin-top: 10px;"><strong>Success</strong></div>

其他来源:javascript copy rich text contents to clipboard