Javascript – Copy string to clipboard as text/html – Stack Overflow
Posted by jpluimers on 2023/09/27
For my link archive is the below answer that should help me a lot with unfinished bits from Some JavaScript bookmarklets for WordPress published pages centered around navigation and IDs.
Goal of that post was to have some grounding and eventually find a means to build an HTML page in a new tab using a bookmarklet that I then later could post to my blog.
Assembling to HTML and putting it on the clipboard might be a lot easier and better fitting in my workflow.
So, via [Wayback/Archive] javascript copy html to clipboard – Google Search, for my link archive: [Wayback/Archive] Javascript – Copy string to clipboard as text/html – Stack Overflow (thanks [Wayback/Archive] Loilo for answering and [Wayback/Archive] kofifus for asking):
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 create a container to put our HTML code into.
- We style the container to be hidden and detect the page’s active stylesheets. The reason will be explained shortly.
- We put the container into the page’s DOM.
- We remove possibly existing selections and select the contents of our container.
- 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.
- Before we do this, we prematurely execute the
copycommand. 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.- We actually disable the page’s styles.
- Now we execute the
copycommand again.- We re-enable the stylesheets.
- We remove the container from the page’s DOM.
And we’re done.
–jeroen
[Wayback/Archive] Copy rich text – JSFiddle – Code Playground
The Wiert Corner - irregular stream of stuff 
Leave a comment