Copy rich HTML with the native Clipboard API ?

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves.

Copying text or images is fairly well documented, but examples writing rich text (as HTML) are harder to come by.

At tim…


This content originally appeared on DEV Community and was authored by Stephen Griffiths

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves.

Copying text or images is fairly well documented, but examples writing rich text (as HTML) are harder to come by.

At time of writing, this is implemented in Chrome 86+ and in Safari. I got the content for this post from the Glitch project created by dsleeps at Google.

How to copy rich text HTML onto the Clipboard API

This sample assumes you have a <div class="js-output"></div> which contains your HTML to copy.

I’ll cut right to it:

try {
  const content = document.getElementsByClassName('js-output')[0].innerHTML;
  const blobInput = new Blob([content], {type: 'text/html'});
  const clipboardItemInput = new ClipboardItem({'text/html' : blobInput});
  navigator.clipboard.write([clipboardItemInput]);
} catch(e) {
  // Handle error with user feedback - "Copy failed!" kind of thing
  console.log(e);
}

Key things:

  • Get the HTML string (I’m using innerHTML of an element for this)
  • Create a new Blob.
    • Param one must be an Array-like or a USVString value. So we wrap our HTML content in an array.
    • Param two is an options object, where we set the MIME type.
  • Create a ClipboardItem around the blob, specifying MIME type again
  • Finally, write the ClipboardItem to the clipboard API.

Demo

I have a quickly-made Vue app with a ‘Copy to Clipboard’ button at https://stegriff.github.io/deployment-complete/. Source repo at https://github.com/stegriff/deployment-complete.

I hope this tutorial helps you! What will you make? ?


This content originally appeared on DEV Community and was authored by Stephen Griffiths


Print Share Comment Cite Upload Translate Updates
APA

Stephen Griffiths | Sciencx (2021-07-08T15:57:15+00:00) Copy rich HTML with the native Clipboard API ?. Retrieved from https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/

MLA
" » Copy rich HTML with the native Clipboard API ?." Stephen Griffiths | Sciencx - Thursday July 8, 2021, https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/
HARVARD
Stephen Griffiths | Sciencx Thursday July 8, 2021 » Copy rich HTML with the native Clipboard API ?., viewed ,<https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/>
VANCOUVER
Stephen Griffiths | Sciencx - » Copy rich HTML with the native Clipboard API ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/
CHICAGO
" » Copy rich HTML with the native Clipboard API ?." Stephen Griffiths | Sciencx - Accessed . https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/
IEEE
" » Copy rich HTML with the native Clipboard API ?." Stephen Griffiths | Sciencx [Online]. Available: https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/. [Accessed: ]
rf:citation
» Copy rich HTML with the native Clipboard API ? | Stephen Griffiths | Sciencx | https://www.scien.cx/2021/07/08/copy-rich-html-with-the-native-clipboard-api-%f0%9f%93%8b/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts