How can I copy rich text contents to the clipboard with JavaScript?

by

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);
};

⚠️ ClipboardEvent.clipboardData is experimental technology. Check the browser compatibility table in MDN (05-03-21)

More Related Contents:

  1. Using execCommand (Javascript) to copy hidden text to clipboard
  2. Dynamic page load can’t load Java with page
  3. Why I have to put all the script to index.html in jquery mobile
  4. Replacing css file on the fly (and apply the new style to the page)
  5. THREE.js Ray Intersect fails by adding div
  6. How to include multiple js files using jQuery $.getScript() method
  7. Performance of MutationObserver to detect nodes in entire DOM
  8. How do I replace text inside a div element?
  9. Dynamically resizing Image-maps and images
  10. get the data of uploaded file in javascript
  11. Loading an image to a from
  12. Can I run HTML files directly from GitHub, instead of just viewing their source?
  13. JS – window.history – Delete a state
  14. Embed an External Page Without an Iframe?
  15. How to change active class while click to another link in bootstrap use jquery?
  16. Sending message to a specific connected users using webSocket?
  17. Bug with Chrome’s localStorage implementation?
  18. How to access the content of the “embed” tag in HTML
  19. What are the possible ways to hide an element via CSS [closed]
  20. search data from html input in mysql
  21. Waiting for dynamically loaded script
  22. Styling Vuetify selectors
  23. angularjs custom filter to check for values inside a data array
  24. Escaping HTML entities in JavaScript string literals within the block
  25. JavaScript – Get size in bytes from HTML img src
  26. Set Caret Position in ‘contenteditable’ div that has children
  27. Jquery/Javascript Opacity animation with scroll
  28. JavaScript EventSource SSE not firing in browser
  29. Maximum Call Stack Size Exceeded During a setTimeout Call
  30. Does jQuery strip some html elements from a string when using .html()?

Leave a Comment