Не удается сохранить отформатированные данные (текст / HTML) в буфер обмена в Safari - PullRequest
Новая
       7

Не удается сохранить отформатированные данные (текст / HTML) в буфер обмена в Safari

0 голосов
/ 11 сентября 2018

Я хочу скопировать часть HTML-страницы в буфер обмена и сохранить форматирование.

Я нашел решение, основанное на execCommand API (то есть document.execCommand("copy")), и оно должно работать во всех основных браузерах в соответствии с документация разработчика mozilla и caniuse.com , так что даже Safari 10+ должен поддерживать это.

См. пример ниже, который работает в Chrome v.68, Firefoxv.61, Edge v.42, но не в последнем Safari 11.1.2 (13605.3.8):

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

Есть много jsбиблиотеки (например: https://clipboardjs.com),, но большинство решений основаны на API execCommand (уже пробуют здесь) или на выборе - т.е. создают невидимую область текста, это работает в Safari, но я теряю форматирование.

Кто знает, можно ли это сделать в 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)

});

1 Ответ

0 голосов
/ 11 сентября 2018

Согласно этот ответ:

В целях безопасности iOS Safari допускает только document.execCommand ('copy') для текста в контейнере contentEditable.

Я добавил код, чтобы сделать div редактируемым , а затем выделил все элементы внутри него:

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

});
...