copy an element as HTML to clipboard

Question

I've managed to write some jQuery to find an element and copy it's html to the clipboard (ie only).

The problem is that when I paste this into a rich text box area in sharepoint it pastes the HTML as text only.

How do i replicate the user action of highlighting a link on a page and pressing copy. When I do this manually and then paste the clipboard contents the rich text area realises that it is markup and replicates the link as an anchor in the text content.

Answer 1

Unfortunately, as far as I know the only programmatic access IE gives to the clipboard allows you to set text data and URL data, but nothing else: http://msdn.microsoft.com/en-us/library/ms536744(v=VS.85).aspx

This works:

window.clipboardData.setData("text", "<div>Testing</div>");

...but has the problem you mentioned. Sadly, this doesn't work:

window.clipboardData.setData("html", "<div>Testing</div>");

A bit surprising, really.

Answer 2

This is what I used to copy/paste a hyperlink HTML element to the clipboard so that when you paste it the href is hidden and you only see the "prettier" name.

HTML:

<button onclick="copyToClipboard()">Copy me!</button>

Javascript:

var copyToClipboard = (function() {
    var _dataString = null;
    $('.transform').toggleClass('transform-active');
    document.addEventListener("copy", function(e){
        if (_dataString !== null) {
            try {
                e.clipboardData.setData("text/html", link);
                e.preventDefault();
            } finally {
                _dataString = null;
            }
        }
    });
    return function(data) {
        _dataString = data;
        document.execCommand("copy");
    };
})();