clipboardjs 将 div 的 html 内容复制到剪贴板
clipboardjs copy the html contents of a div to the clipboard
我正在尝试使用 zenorocha clipboardjs javascript 插件复制多个 div 的 html 内容。请不要 post 其他替代方案,因为我想试试这个插件,因为它在我想介绍的浏览器上看起来很可靠。
我在 zenorocha 的 github 上看过 this issue,但这段代码似乎 return 和 Uncaught TypeError: Illegal constructor
。
new Clipboard('.copy', {
text: function() {
var htmlBlock = document.querySelector('.yourSelector');
return htmlBlock.innerHTML;
}
});
我创建了一个 example fiddle if anyone can help me use 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
的新数据属性,因为单个页面上会有多个按钮和内容块。
请参阅 fiddle 此处 https://jsfiddle.net/joshmoto/qLord78p/
这实际上可以使用 zenorocha clipboardjs 吗?
提前致谢。
Clipboard
是原生 class,可通过(以及其他地方)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;
}
});
这是我的最终代码,我使用了一些 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>
我正在尝试使用 zenorocha clipboardjs javascript 插件复制多个 div 的 html 内容。请不要 post 其他替代方案,因为我想试试这个插件,因为它在我想介绍的浏览器上看起来很可靠。
我在 zenorocha 的 github 上看过 this issue,但这段代码似乎 return 和 Uncaught TypeError: Illegal constructor
。
new Clipboard('.copy', {
text: function() {
var htmlBlock = document.querySelector('.yourSelector');
return htmlBlock.innerHTML;
}
});
我创建了一个 example fiddle if anyone can help me use 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
的新数据属性,因为单个页面上会有多个按钮和内容块。
请参阅 fiddle 此处 https://jsfiddle.net/joshmoto/qLord78p/
这实际上可以使用 zenorocha clipboardjs 吗?
提前致谢。
Clipboard
是原生 class,可通过(以及其他地方)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;
}
});
这是我的最终代码,我使用了一些 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>