代码之家 › 专栏 › 技术社区 › joshmoto

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

clipboard javascript

joshmoto · 技术社区 · 7 年前

我正在尝试使用复制多个div的html内容 zenorocha clipboardjs 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');

<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/

这真的有可能吗 ?

提前谢谢。

2 回复 | 直到 7 年前

cwallenpoole 7 年前

Clipboard 是本地类,可通过(其他地方)访问 Chrome's Clipboard API .

剪贴板 到 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;
    }
});

joshmoto 7 年前

这是我的最后一段代码,我使用了一点jQuery来获取与copy按钮相关的特定元素。

JS公司

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

<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/

推荐文章

ultraloveninja · 将当前URL复制到剪贴板

8 年前

puneet · 粘贴前更新剪贴板数据(不是“粘贴”事件)

8 年前

Gucci · 将文本从剪贴板复制到剪贴板

8 年前

kiddslopp · Swift 4+:使用NSPasteboard将字符串复制到剪贴板

8 年前

Aging Hippie · 将多个对象的组合复制到剪贴板(c#winforms)

8 年前

D Thr. · 如何在WinApi C#中订阅剪贴板事件?

8 年前

Jake · 文件execCommand('copy')不在Chrome上工作

8 年前

Krisztián Balla · 如何向HTML剪贴板数据中添加空格,以便WinWord在粘贴时插入它们?

8 年前

Ashok · 如何在非主线程中获取剪贴板数据?

8 年前

Johnny Derpp · iMacros-不将原始提取文本保存在csv中

9 年前