Clipboard.js: Add support to copy html into clipboard so that when pasted into RTE it shows as formatted text and not markup

[eltonjude]

Minimal example

https://jsfiddle.net/Lbb6w3p2/

Expected behaviour

I am using the imperative API and generating and returning dynamic html markup. I am expecting that when I paste into any Rich Text Editor (Outlook/Gmail in browser/Word) I should see the resultant formatted Table representation.

Actual behaviour

However, when I paste into any Rich Text Editor it displays the markup as plain text. You can see this by clicking the "Copy HTML Table to clipboard - default" button and paste into Word or Gmail.

Suggested Feature Implementation

If you add support for htmlText in the imperative API and if set then create a div rather than textarea here and set innerHTML rather than value here, you will achieve this feature.

Workaround

The workaround is to create a fakeElem myself and set it as target in the imperative API. The downside is I have to duplicate your code almost verbatim. In the minimal example above, click "Copy HTML Table to clipboard - custom" and paste into Outlook/Gmail and you will get a formatted table.

[zenorocha]

Hey @eltonjude,

Thanks a lot for this suggestion. Unfortunately, we can replace that textarea with a div because that could open a lot of room for style leaking. The reason why we use textarea is to avoid any extra styling that could be set by the user or even the default style that each browser brings.

For example: here's how that same code looks on different browsers without any styling:

And here's how your copy content could be affected by user styling (https://jsfiddle.net/Lbb6w3p2/5/):

The only solution I can think is to use Shadow DOM in order to encapsulate the right style, but browser support is not good as of today.

If you have any other ideas, please feel free to send a pull request.

[mlewand]

hey @zenorocha I just also had the requirement to put some HTML into the clipboard, without writing 100s of lines.

I was actually able to precisely set clipboard HTML mime type by changing dataTransfer in copy listener that is triggered after document.execCommand( 'copy' ).

Here's a listing that I created, that can be used to achieve that:

button.addEventListener( 'click', function() {
    const copyListener = event => {
        const fixtureHtml = '<p>sample <strong>html</strong> data</p>';
        event.clipboardData.setData( 'text/plain', fixtureHtml );
        event.clipboardData.setData( 'text/html', fixtureHtml );
        event.preventDefault();
    };

    document.addEventListener( 'copy', copyListener );
    document.execCommand( 'copy' );
    document.removeEventListener( 'copy', copyListener );
} );

Tested on latest Chrome, Firefox and Safari. Don't know if it plays well with IE11 and non-chromium Edge.

[rileytg]

I ended up using another library with this code:

dt = new clipboard.DT()
dt.setData('text/plain', url)
dt.setData('text/html', '<a href="' + url + '">' + text + '</a>')
clipboard.write(dt);

https://github.com/lgarron/clipboard-polyfill

We've tested on IE, Edge, Firefox, Safari and Chrome .