javascript - Clipboardjs 将div的html内容复制到剪贴板

Question

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

我看过this issue在 zenorocha 的 github 上，但这段代码似乎只是返回一个 Uncaught TypeError: Illegal constructor。

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

我创建了一个example fiddle如果有人可以帮我使用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 的新数据属性，因为单个页面上将有多个按钮和内容 block 。

在这里查看 fiddle https://jsfiddle.net/joshmoto/qLord78p/

使用 zenorocha clipboardjs 这实际上可能吗？ ？

提前致谢。

Answer 1

Clipboard 是一个 native 类，可通过(以及其他地方)Chrome's Clipboard API 访问。 .

如果您想让该代码正常工作，请将 Clipboard 更改为 ClipboardJS。事实上，那就是 even how ClipboardJS documentation calls it 。这工作得很好:

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