Cannot save formatted data (text/html) in the clipboard in Safari

Question

I want to copy a part of HTML page to the clipboard and keep the formatting.

I googled for a solution based on execCommand API (i.e document.execCommand("copy")) and that should work on all major browsers according to mozilla developer docs and caniuse.com, so that even Safari 10+ should support that.

See an example below that works in Chrome v.68, Firefox v.61, Edge v.42, but not in the latest Safari 11.1.2 (13605.3.8):

https://jsfiddle.net/andreyprokhorov/xpvt214o/773246/

There are plenty of js libraries out there (for ex: https://clipboardjs.com), but most solutions rely on execCommand APIs (already trying here) or on selection - i.e. create an invisible textarea, this does work in Safari but I lose the formatting.

Who knows if it is possible to do in Safari?

<div id="data"> <b>Example HTML data</b> </div> <button>Save to clipboard</button> $(function() { function copyToClipboard(data) { function listener(e) { e.clipboardData.setData("text/html", data); e.clipboardData.setData("text/plain", data); e.preventDefault(); } document.addEventListener("copy", listener); document.execCommand("copy"); document.removeEventListener("copy", listener); }; function copyHtmlToClipboard() { var data = document.getElementById("data").innerHTML; copyToClipboard(data); }; var button = $("button") button.on("click", copyHtmlToClipboard) });

Check this answer: stackoverflow.com/a/34046084/3648578

kosmos
– kosmos

2018-09-11 11:27:26 +00:00
Commented Sep 11, 2018 at 11:27 — kosmos
– kosmos, Commented Sep 11, 2018 at 11:27

Andrey Prokhorov · Accepted Answer · 2018-09-11 14:01:08Z

According to this answer:

For security reasons iOS Safari only allows document.execCommand('copy') for text within a contentEditable container.

I added some code to make the div editable and then select all elements inside it:

See https://jsfiddle.net/andreyprokhorov/xpvt214o/774620/

$(function() { function selectElementContents(el) { var range = document.createRange(); range.selectNodeContents(el); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); }; function copyToClipboard(data) { function listener(e) { e.clipboardData.setData("text/html", data); e.clipboardData.setData("text/plain", data); e.preventDefault(); } document.addEventListener("copy", listener); document.execCommand("copy"); document.removeEventListener("copy", listener); }; function copyHtmlToClipboard() { var dataHtmlElement = document.getElementById("data"); dataHtmlElement.contentEditable = true; dataHtmlElement.readOnly = false; selectElementContents(dataHtmlElement); copyToClipboard(dataHtmlElement.innerHTML); dataHtmlElement.contentEditable = false; dataHtmlElement.readOnly = true; window.getSelection().removeAllRanges(); }; var button = $("button") button.on("click", copyHtmlToClipboard) });

Collectives™ on Stack Overflow

Cannot save formatted data (text/html) in the clipboard in Safari

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related