javascript copy rich text contents to clipboard

Question

Premise

I need help copying rich text to the clipboard using JavaScript. I have searched around and haven\'t found anything to suit my specific needs.

Cod

Answer 1

This tiny JS plugin copies richtext without using Flash: https://www.npmjs.com/package/clipboard-js

It's based on https://clipboardjs.com/ - but it's an upgrade in my opinion, because the original only supports plain text.

The code is simple:

clipboard.copy({
    "text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});

Answer 2

With modern browsers, if you want copy rich text only, there is a very easy solution without using any packages. See http://jsfiddle.net/jdhenckel/km7prgv4/3

Here is the source code from the fiddle

<button onclick="copyToClip(document.getElementById('foo').innerHTML)">
  Copy the stuff
  </button>

<div id=foo style="display:none">
  This is some data that is not visible. 
  You can write some JS to generate this data. 
  It can contain rich stuff.  <b> test </b> me <i> also </i>
  <span style="font: 12px consolas; color: green;">Hello world</span> 
  You can use setData to put TWO COPIES into the same clipboard, 
  one that is plain and one that is rich. 
  That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
</div>

the function

function copyToClip(str) {
  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);
};

Answer 3

The Document.execCommand() is apparently becoming obsolete:

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand),

There is a new Clipboard API:

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

There are some examples here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

And also here: https://web.dev/async-clipboard/

Answer 4

i searched for a week now and finally found my answer!!! for those of you looking to copy rich text to the clipboard with javascript, then use the function at the link below, works like a charm. no need of flash and other stuff suggested :)

Copying an image to clipboard using JavaScript/jquery

Answer 5

Well here is the deal most modern web browsers wont let you have access to the clip board. However like with everything there is a work around.

https://github.com/zeroclipboard/zeroclipboard

this is a js/flash plugin that lets you copy text to your clipboard.
(i believe you can use it for rich text.)