clipboardjs 将div的html内容复制到剪贴板

Question

我尝试使用 zenorocha Clipboardjs javascript 插件复制多个 div 的 html 内容。请不要发布其他替代方案，因为我想尝试一下这个插件，因为它在我想要涵盖的浏览器上似乎很可靠。

我在 zenorocha 的 github 上查看了这个问题，但这段代码似乎只是返回一个

Uncaught TypeError: Illegal constructor

。

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

我创建了一个示例小提琴，如果有人可以帮助我使用clipboardjs来复制div的html内容。

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

Clipboard

是一个原生类，可以通过（以及其他地方）Chrome的剪贴板API访问。

如果您想让该代码正常工作，请将

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

Answer 2

这是我的最终代码，我使用了一些 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 3

new ClipboardJS('*', { text: () => 'haha' }).on('success', (e) => {
  showSuccessToast('copy success')
  e.clearSelection()
})

第一个参数可以是“body”、“*”或其他内容