Is there a way in javascript to copy an html string (ie <b>xx<b>
) into the clipboard as text/html, so that it can then be pasted into for example a gmail message with the formatting (ie, xx in bold)
There exists solutions to copy to the clipboard as text (text/plain) for example https://stackoverflow.com/a/30810322/460084 but not as text/html
I need a non flash, non jquery solution that will work at least on IE11 FF42 and Chrome.
Ideally I would like to store both text and html versions of the string in the clipboard so that the right one can be pasted depending if the target supports html or not.
see jsfiddle where you can enter html segment into the textarea and copy to the clipboard with ctrl+c.
Select the first item that you want to copy, and press CTRL+C. Continue copying items from the same or other files until you have collected all of the items that you want. The Office Clipboard can hold up to 24 items.
The function copies the visible text of the element to the clipboard. This works as if you had selected the text and copied it with ctrl+c. Use the parameter "id" to select the element you want to copy.
Since this answer has gotten some attention, I have completely rewritten the messy original to be easier to grasp. If you want to look at the pre-revisioned version, you can find it here.
The boiled down question:
Can I use JavaScript to copy the formatted output of some HTML code to the users clipboard?
Answer:
Yes, with some limitations, you can.
Solution:
Below is a function that will do exactly that. I tested it with your required browsers, it works in all of them. However, IE 11 will ask for confirmation on that action.
Explanation how this works can be found below, you may interactively test the function out in this jsFiddle.
// This function expects an HTML string and copies it as rich text. function copyFormatted (html) { // Create container for the HTML // [1] var container = document.createElement('div') container.innerHTML = html // Hide element // [2] container.style.position = 'fixed' container.style.pointerEvents = 'none' container.style.opacity = 0 // Detect all style sheets of the page var activeSheets = Array.prototype.slice.call(document.styleSheets) .filter(function (sheet) { return !sheet.disabled }) // Mount the container to the DOM to make `contentWindow` available // [3] document.body.appendChild(container) // Copy to clipboard // [4] window.getSelection().removeAllRanges() var range = document.createRange() range.selectNode(container) window.getSelection().addRange(range) // [5.1] document.execCommand('copy') // [5.2] for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true // [5.3] document.execCommand('copy') // [5.4] for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false // Remove the container // [6] document.body.removeChild(container) }
Explanation:
Look into the comments in the code above to see where you currently are in the following process:
We do the copying itself. This is actually a multi-step process: Chrome will copy text as it sees it, with applied CSS styles, while other browsers will copy it with the browser's default styles. Therefore we will disable all user styles before copying to get the most consistent result possible.
copy
command. This is a hack for IE11: In this browser, the copying must be manually confirmed once. Until the user clicked the "Confirm" button, IE users would see the page without any styles. To avoid this, we copy first, wait for confirmation, then disable the styles and copy again. That time we won't get a confirmation dialog since IE remembers our last choice.copy
command again.And we're done.
Caveats:
The formatted content will not be perfectly consistent across browsers.
As explained above, Chrome (i.e. the Blink engine) will use a different strategy than Firefox and IE: Chrome will copy the contents with their CSS styling, but omitting any styles that are not defined.
Firefox and IE on the other hand won't apply page-specific CSS, they will apply the browser's default styles. This also means they will have some weird styles applied to them, e.g. the default font (which is usually Times New Roman).
For security reasons, browsers will only allow the function to execute as an effect of a user interaction (e.g. a click, keypress etc.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With