Question

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

我已经在zenorocha的github上查看了this issue，但是这段代码似乎只返回了Uncaught TypeError: Illegal constructor。

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

如果有人可以帮助我使用example fiddle复制div的html内容，我就创建了clipboardjs。

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

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/

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

2 个答案: