如何使用clipboardjs实现高亮代码一键复制功能

潘老师的博客为了防止文章被盗用，因此设置了禁止右键以及复制功能，但是带来的一个问题就是文章中涉及的代码部分也不能被复制，这就有点坑了，于是就开始寻找解决办法，通过网上的一番搜索与尝试，终于实现了使用clipboard.js实现高亮代码一键复制功能。这个功能不仅Wordpress模板可用，其他网站也可以参考去修改使用，本质上思路是一样的，我这里是基于我的博客模板来演示的！

一、前提

1、保证你的网站中引入了jQuery，一般网站基本都是支持的。
2、下载clipboard.min.js，官网直达：点击进入中文官网，找到如图zip文件点击下载。

3、解压zip后找到dist目录，我们选择clipboard.min.js压缩版，这样有利于提高我们网站的加载速度。

二、代码一键复制实现

由于我的代码都是放在pre标签中的，因此我需要将文章中的所有此标签的右上角放置一个可以点击的按钮，能够实现复制该段代码到粘贴板。具体效果包括：

• 默认按钮隐藏
• 鼠标移入移出pre标签区域，复制按钮淡入淡出
• 复制按钮前支持font-awesome图标，即代码中的i标签

，你的若不支持可去掉

• 点击复制按钮后如果复制成功切换按钮内容，3秒后状态还原

好了，下面直接来贴代码，具体的代码中的一些样式属性（尤其注意选择器）需要参考自己的网站来修改：

提示：记得自己复制代码后最好用网上的在线压缩工具压缩下再上传至网站使用
1、新建copy.min.js

jQuery(document).ready(function(){
    for (var i = 0; i < $('.article-content pre').length; i++) {
        $('.article-content pre').eq(i).prepend('<div class="btn-copy"><span class="single-copy copy" data-clipboard-target="#copy'+ i +'" title="点击复制本段代码"><i class="fa fa-files-o"></i> 复制代码</span></div>');
        $('.article-content pre > ol').eq(i).attr('id','copy'+ i);
    }
    var clipboard = new ClipboardJS('.copy');
    clipboard.on('success', function(e) {
        e.clearSelection();
        $(e.trigger).html('<span style="color:#32cd32"><i class="fa fa-check-square-o" aria-hidden="true"></i> 复制成功</span>');
        setTimeout(function(){$(e.trigger).html('<i class="fa fa-files-o"></i> 复制代码</span>');},3000);
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        alert("复制失败，请联系站长QQ：1562691348");
    });
    
});

2、新建copy.css

.btn-copy{
    position: relative;
    top: 0px;
    float:right;
    cursor: pointer;
    height: 20px;
    width:70px;
    text-align: center;
    padding: 1px 8px;
    color: #FFF5EE;
    font-size: .9em;
    background-color: rgba(224, 224, 224, 0.2);
    border-radius: 10px;
    transition: opacity 1.5s;
    opacity: 0;
}
pre:hover .btn-copy{opacity: 1;transition-duration: 1s;}

3、上传至网站使用

将clipboard.min.js、copy.min.js、copy.css上传至网站使用即可。如果你是Wordpress网站，可以在header.php中直接引入这3个文件，当然你也可以将其中两个js文件放到footer.php中实现底部加载提高加载速度，我自己的博客是通过functions.php进行动态加载的，在此就不做演示了。此代码实现的效果就是该页面中代码复制的效果，如果你还有问题可以联系潘老师哦！