还在手动使用 clipboard.js 实现复制文本到剪贴板，现在在 WordPress 中可以直接使用

如果要在网页实现通过点击按钮或执行其他操作时将文本复制到剪贴板复制文本到剪贴板，现在一般都是通过 clipboard.js 这个非常流行的 JavaScript 库实现的，它提供了一个简单，易于使用的 API 来处理剪贴板操作，如复制文本和剪切文本。

这个库的主要优点是它不需要 Flash，这与许多其他处理剪贴板操作的 JavaScript 库不同，这使得 clipboard.js 在所有现代浏览器上都能良好地工作，包括在移动设备上。

如何使用 clipboard.js 

使用 clipboard.js 首先要加载相关的 JavaScript 库：

<script src="dist/clipboard.min.js"></script>

然后再在页面上添加一个按钮或其他元素，该元素将触发复制操作，这个元素需要一个 data-clipboard-text 属性，该属性的值将被复制到剪贴板

<button class="btn" data-clipboard-text="Hello, world!">Copy to clipboard</button>

最后需要创建一个新的 ClipboardJS 对象，将选择器传递给它，该选择器用于匹配将触发复制操作的元素。

new ClipboardJS('.btn');

当用户点击按钮时，"Hello, world!" 就会被复制到剪贴板。

clipboard.js 还支持在点击按钮元素上定义 data-clipboard-target 属性，来指定复制的文本是来自其他元素的内容，clipboard.js 还支持 success 和 error 事件的监听，以在复制操作成功或失败时执行特定操作。

clipboard.js 还有一些高级用途，因为我们在接下来介绍在 WordPress 中使用，基本用不到，这里就不介绍了。总的来说，clipboard.js 是一个功能强大且易于使用的库，非常适合需要处理剪贴板操作的 web 应用程序。

整合到 WordPress

如果在 WordPress 中使用，还需要自己加载相关脚本，然后定义按钮这些，那就太不程序化了，所以我整理和一下，在 WordPress 中通过 Shortcode 方式就可以插入一段可被复制到剪贴板的文本：

这个 Shortcode 是 clipboard，然后把要复制的内容放到 shortcode 中即可，然后在文章详情页中，把鼠标移动这段文字中，就会出现复制的图标：

点击该按钮，就会复制这段文本，并且复制按钮页按钮也变成了复制成功的按钮：

大家可以试试，公众号用户请到这里测试「https://blog.wpjam.com/project/wpjam-clipboard/」：

最后如果大家对我写的被复制文本的样式不满意，可以把插件的 static/clipboard.css 文件复制到你所使用的主题的 static/clipboard.css 下，然后按照自己的想法去改就好了，我不想写后台设置让大家自定义样式。😂