RIPRO美化-pre标签文本新增复制代码功能

写文章的时候，作为一名专业的码农，经常会在文章中粘贴一些代码。对于少许的代码块复制还行，但是对于代码块比较长的，如果需要复制这段代码就比较麻烦。像其他比较专业的博客系统，都会在代码块上有一个复制代码的按钮功能，用来快速复制整个代码块的代码，省时省力。于是我也想给我的博客增加一个这个功能，话不多说，安排起来。

实现思路

1. 在页面加载完成之后，使用 js 给每个 pre 标签增加一个按钮“复制代码”；
2. 给按钮增加点击事件，点击事件的功能就是复制代码块的内容。

实现代码

CSS 部分

btn-pre-copy 是 pre 标签中使用 js 增加的“复制代码”按钮。css 的作用是让他显示在 pre 标签的右上角。这里要注意 pre 标签和按钮中 position 属性。

.code-toolbar {
    position: relative;
}

pre .btn-pre-copy {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0,0%,54.9%,.8);
    transition: color .1s;
}

js 部分

js 部分主要是给pre标签增加按钮和实现拷贝部分，我这里拷贝部分的实现是先实例化一个临时的节点textarea，然后把pre的内容设置进这个临时节点，然后选中内容进行复制，最后销毁这个节点。具体参考代码。

注意：js 部分有依赖于 jquery。

以上关于RIPRO美化-pre标签文本新增复制代码功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。