copy-html-to-clipboard

copy-html-to-clipboard

Simple module exposing copy function that will try to use execCommand with fallback to IE-specific clipboardData interface and finally, resort to usual prompt with proper text content and message.

Forked from copy-to-clipboard to add html support.

Example

import copy from 'copy-html-to-clipboard';

copy('Text');

// Copy with options
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

// Copy html
copy('<b>i am bold</b>', {
  asHtml: true,
});

API

copy(text: string, options: object): boolean — tries to copy text to clipboard. Returns true if no additional keystrokes were required from user (so, execCommand, IE's clipboardData worked) or false.

Value	Default	Notes
options.debug	false	Boolean. Optional. Enable output to console.
options.asHtml	false	Boolean. True - use param text as html.
options.onlyHtml	false	Boolean. True - if can't copy html to clipboard, don't try to copy text with alternative ways.
options.canUsePrompt	true	Boolean. True - try alternative ugly prompt-way.
options.message	Copy to clipboard: #{key}, Enter	String. Optional. Prompt message. *

* all occurrences of #{key} are replaced with ⌘+C for macOS/iOS users, and Ctrl+C otherwise.

Browser support

Works everywhere where prompt* is available. Works best (i.e. without additional keystrokes) in Chrome, FF, Safari 10+, and, supposedly, IE/Edge.

Note: does not work on some older iOS devices.
* – even though Safari 8 has prompt, you cannot specify prefilled content for prompt modal – thus it doesn't work as expected.

Installation

• Can be used as npm package and then leveraged using commonjs bundler/loader:

npm i --save copy-html-to-clipboard

• Can be utilized using wzrd.in. Add following script to your page:

<script src="https://wzrd.in/standalone/copy-html-to-clipboard@latest" async></script>

You will have window.copyToClipboard exposed for you to use.

UI components based on this package:

• react-copy-html-to-clipboard
• react-copy-to-clipboard
• copy-button

See also:

• clipboard-copy by @feross
• MDN
• April 2015 update on Cut and Copy Commands

Running Tests

This project has some automated tests, that will run using nightwatch on top of selenium.

npm i
npm test