之前在文章WordPress 代码高亮方案:Prism中实现了代码高亮功能,但是没有实现其他细节,现在为其添加一个点击复制的按钮。点击复制的基本逻辑如下:
- 为每个代码块添加一个复制按钮
- 为复制按钮添加click事件
- 获取对应的代码
- 添加 <textarea> DOM节点,将获取的代码写入
- 选中textarea内的代码
- 复制选中的内容
- 删除节点
实现代码
JS 代码:
$(function() {
//添加复制按钮
$("pre[class*='language-']").prepend("<div class='copy_code'>复制</div>");
//为复制按钮添加click事件
$(".copy_code").on("click", function() {
//初始化
$("textarea").remove("#targetId");
//获取对应的代码
var codePre = $(this).next("code");
var codeText = codePre[0].textContent;
//添加 <textarea> DOM节点,将获取的代码写入
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = "targetId";
codePre.append(target);
target.textContent = codeText;
//选中textarea内的代码
target.focus();
target.setSelectionRange(0, target.value.length);
// 复制选中的内容
document.execCommand("copy");
//删除添加的节点
$("textarea").remove("#targetId");
$(this).html("成功").css("background", "rgba(100,100,100,.8)");
var thisCopied = $(this);
setTimeout(function() {
thisCopied.html("复制").css("background", "").css("color", "");
}, 2000)
})
})
CSS 样式
pre[class*="language-"]:hover .copy_code {
background: rgba(200, 200, 200, .9);
}
.copy_code {
line-height: 1.6;
vertical-align: middle;
color: #fff;
padding: 0 .5em;
position: absolute;
right: .5em;
top: .5em;
border-radius: 3px;
background: rgba(220, 220, 220, .9);
z-index: 2;
transition: .5s;
}
.copy_code:hover {
background: rgba(200, 200, 200, .9);
cursor: pointer;
}
.copy_code:active {
background: rgba(170, 170, 170, .9);
}
存在的bug
由于代码块中没有设置强制换行,如果宽度超出后出现拖拉条,拖动时copy按钮会随之移动:
解决方案是将copy按钮放在pre[class*="language-"]
之外,此处未实现。
参考:click-button-copy-to-clipboard-using-jquery
dawang2019 年 09 月 28 日下午 4:04
复制按钮到浏览器视窗右上角了,如何调整到代码块右上角?
snowtraces*2019 年 09 月 29 日下午 11:18
按钮的父级元素,position:relative