网站内容复制(pre写文章代码复制功能详解(一)代码怎么复制 )

　　网站内容复制(pre写文章代码复制功能详解(一)代码怎么复制

)

　　在线测试：预代码复制功能

　　至此这篇关于在网站代码块前置标签文章中添加复制代码按钮代码的文章就介绍到这里了，

　　在写文章的时候，作为一个专业的程序员，我经常会在文章中粘贴一些代码。有时候代码块比较长，以后使用复制这段代码比较麻烦

　　参考其他专业的博客系统，代码块上有一个复制代码的按钮。用于快速复制整个代码块的代码。所以我也想把这个功能添加到我的博客中。

　　注意：镀铬测试通过。其他浏览器未测试。

　　实施思路：

　　1、页面加载完成后，用js给每个pre标签添加一个“复制代码”按钮

　　2、给按钮添加点击事件，点击事件的作用是复制代码块的内容

　　实现代码：

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

　　.content pre{

position: relative;

background-color: #f5f5f5;

border: 1px solid #ccc;

border-radius: 4px;

padding: 10px;

}

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标签中添加按钮，实现copy部分。我这里复制部分的实现是实例化一个临时节点textarea，然后将pre的内容设置到这个临时节点中，然后选择要复制的内容，最后销毁该节点。具体参考代码。js部分对jquery有依赖

　　$(function(){

//给每一串代码元素增加复制代码节点

let preList = $(".content pre");

for (let pre of preList) {

//给每个代码块增加上“复制代码”按钮

let btn = $("复制代码");

btn.prependTo(pre);

}

});

/**

* 执行复制代码操作

* @param obj

*/

function preCopy(obj) {

//执行复制

let btn = $(obj);

let pre = btn.parent();

//为了实现复制功能。新增一个临时的textarea节点。使用他来复制内容

let temp = $("");

//避免复制内容时把按钮文字也复制进去。先临时置空

btn.text("");

temp.text(pre.text());

temp.appendTo(pre);

temp.select();

document.execCommand("Copy");

temp.remove();

//修改按钮名

btn.text("复制成功");

//一定时间后吧按钮名改回来

setTimeout(()=> {

btn.text("复制代码");

},1500);

}

　　这是一个关于gitee的简单演示。演示示例：