CODEWITHSUNDEEP
javascriptjquerycopyclipboardmarkup
Brian Scott
Brian Scott

Reputation: 9371

copy an element as HTML to clipboard

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.

Upvotes: 3

Views: 6583

Answers (2)

Ben Janos
Ben Janos

Reputation: 71

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");
    };
})();

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075447

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.

Upvotes: 2

Related Questions