Copy to Clipboard and Maintain HTML elements for Email signature

Question

I am making a basic email signature page that I want to be able to use a 'Copy to Clipboard' button / command.

I have it working, although instead of pasting a formatted graphic ready for inclusion in outlook or mac mail, it pastes the actual html. e.g.

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

My code is below and I'd be really grateful for some guidance.

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>

What do you want to copy? What do you mean by `a formatted graphic ready`? — Vikasdeep Singh, May 28 '18 at 01:26
@VicJordan When you create a signature, typically you drag and select html from firefox or explorer and paste it into a signature box in an app like outlook. When you do, rather than display the raw html, it displays the pasted information exactly as it displays in outlook (Image / bold / spacing) if that makes sense. — Brandrally, May 28 '18 at 01:39

score 7 · Accepted Answer · answered May 28 '18 at 02:43

You need to instruct the browser to pass the text in as text/html when the copy event fires. I have reworked your code snippet to include this functionality.

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>

Additional Source: javascript copy rich text contents to clipboard

Really thank you. I just didn't know what I should be googling / searching for. I really appreciate your help and insight. — Brandrally, May 28 '18 at 03:04
@Brandrally No problem. Happy to assist, I am glad that my answer helped. — Jake Chasan, May 28 '18 at 03:05
It certainly did! IOS devices don't seem to want to come to party on this, though am reading-up now for that, if I can't win that battle, it's not going to be the end of the world. Really appreciate the help. — Brandrally, May 28 '18 at 03:23

Copy to Clipboard and Maintain HTML elements for Email signature

1 Answers1