clipboardjs копирует html-содержимое div в буфер обмена

Question

Я пытаюсь скопировать html-содержимое нескольких элементов div, используя zenorocha clipboardjs плагин javascript. Пожалуйста, не публикуйте другие альтернативы, так как я хотел бы попробовать этот плагин, так как он кажется надежным в браузерах, которые я хочу охватить.

Я смотрел на эту проблему на github Зенороча, но этот код, кажется, просто возвращает Uncaught TypeError: Illegal constructor.

new Clipboard('.copy', {
    text: function() {
        var htmlBlock = document.querySelector('.yourSelector');
        return htmlBlock.innerHTML;
    }
});

Я создал пример скрипта , если кто-нибудь может мне помочь, используйте clipboardjs , чтобы скопировать html-содержимое div.

JS

// copy to clipboard
new Clipboard('.copy');

HTML

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-copy-element="content_1">
   Copy to clipboard
</button>

Я создал новый атрибут данных под названием data-copy-element, поскольку на одной странице будет несколько кнопок и блоков контента.

См. Скрипку здесь https://jsfiddle.net/joshmoto/qLord78p/

Возможно ли это на самом деле, используя zenorocha clipboardjs ?

Заранее спасибо.

Answer 1

Вот мой окончательный код, я использовал немного jQuery, чтобы получить конкретный элемент, связанный с кнопкой копирования.

JS

new ClipboardJS('.copy', {
    text: function(trigger) {
        elem = $(trigger).data('clipboard-element');
        var htmlBlock = document.querySelector(elem);
        return htmlBlock.innerHTML;
    }
});

HTML

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-clipboard-element="#content_1">
   Copy to clipboard
</button>

См. Скрипку: https://jsfiddle.net/joshmoto/j2masp3u/

Answer 2

Clipboard - это собственный класс, доступный через (помимо прочего) API Chrome для буфера обмена .

Если вы хотите, чтобы этот код работал, измените Clipboard на ClipboardJS.Фактически, это , даже если ClipboardJS документация называет это .Это работает просто отлично:

new ClipboardJS('.copy', {
    text: function() {
        // based on your fiddle, you may need to replace this selector, too.
        var htmlBlock = document.querySelector('.yourSelector');
        return htmlBlock.innerHTML;
    }
});