Question

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

我有它工作，虽然它不是粘贴格式化的图形准备包含在Outlook或mac邮件中，它粘贴实际的HTML。 e.g。

<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

当text/html事件触发时，您需要指示浏览器将文本作为copy传递。我已经重新设计了您的代码段以包含此功能。

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

复制到剪贴板并维护电子邮件签名的

1 个答案: