Are you sure, it looks like it's asking how to copy a section of HTML as rich-text, which I think is what you are looking for. The answers leave much to be desired though.
– Alexander O'MaraDec 10 '15 at 1:03

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 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.

We actually disable the page's styles.

Now we execute the copy command again.

We re-enable the stylesheets.

We remove the container from the page's DOM.

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.)

this looks fantastic Loilo! if you can work this into a function that accepts an html string (ie 'xx<b>bold</b>yy') and puts it on the clipboard as rich text I'll mark it as the answer. Thanks !
– kofifusDec 10 '15 at 1:27

thx! marked it as the answer. Do you think there's a way to add both text and html to the clipboard at the same time so that the correct version will be chosed depending on the target (ie pasting into notepad vs pasting into gmail) ??
– kofifusDec 10 '15 at 2:15

1

You can only copy one thing to the clipboard, always. Notepad just strips the styled parts away. This will happen to your copied HTML in exactly the same way (try to paste the copied stuff from the JSFiddle to notepad).
– LoiloDec 10 '15 at 2:18

There are still problems with the code. I added a textarea and copy on ctrl+C but FF fails and consoles show 'too much recursion' ! see jsfiddle.net/d740eo04/7 just hit ctrl+c in the textarea
– kofifusDec 10 '15 at 2:36

Seems you're violating a security feature with that. Kind of understandable, you want to hack into the copy event and then actually copy something else, that seems like a risk to me, too. You have to a) not use the copy event but rather listen for keydown and b) take focus off the textarea before copying. jsfiddle.net/Loilo/d740eo04/10
– LoiloDec 10 '15 at 12:36