Typecho复制代码插件

tuziang 发表于 2019-7-23 14:52

介绍：

这是给Typecho博客用的复制代码插件。

https://www.tuziang.com/usr/uploads/2019/04/558354113.gif

仿的CSDN，只有鼠标放到代码块，才会显示复制代码，鼠标从代码块移开，复制代码方框消失。支持一篇文章多个代码块的单独复制

点击复制代码，会出现成功复制的提示。之后延迟一秒后，又会重置为复制代码。

具体JavaScript代码：

//html5 给typecho添加复制代码功能
// by 兔子昂
var codeblocks = document.getElementsByTagName("pre")
//循环每个pre代码块，并添加复制代码

for (var i = 0; i < codeblocks.length; i++) {
//显示复制代码按钮
currentCode = codeblocks
currentCode.style = "position: relative;"
var copy = document.createElement("div")
copy.style = "position: absolute;right: 4px;\
top: 4px;background-color: white;padding: 2px 8px;\
margin: 8px;border-radius: 4px;cursor: pointer;\
box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
copy.innerHTML = "复制"
currentCode.appendChild(copy)
//让所有 "复制"按钮全部隐藏
copy.style.visibility = "hidden"
}

for (var i = 0; i < codeblocks.length; i++) {

!function (i) {
   //鼠标移到代码块，就显示按钮
   codeblocks.onmouseover = function () {
         codeblocks.childNodes.style.visibility = "visible"
   }

   //执行复制代码功能
   function copyArticle(event) {
         const range = document.createRange();

         //范围是 code，不包括刚才创建的div
         range.selectNode(codeblocks.childNodes);

         const selection = window.getSelection();
         if (selection.rangeCount > 0) selection.removeAllRanges();
         selection.addRange(range);
         document.execCommand('copy');

         codeblocks.childNodes.innerHTML = "复制成功"
         setTimeout(function () {
            codeblocks.childNodes.innerHTML = "复制"
         }, 1000);
         //清除选择区
         if (selection.rangeCount > 0) selection.removeAllRanges(); 0
   }
   codeblocks.childNodes.addEventListener('click', copyArticle, false);

}(i);

!function (i) {
   //鼠标从代码块移开则不显示复制代码按钮
   codeblocks.onmouseout = function () {
         codeblocks.childNodes.style.visibility = "hidden"
   }
}(i);
}

使用：
github地址：https://github.com/Tuziang/CodeCopy

我来试试 发表于 2021-1-15 12:40

Auandzu 发表于 2019-11-13 21:19
步不知道为什么就是用不了

Plugin.php文件里面的第78行
$path = Helper::options()->pluginUrl . '/CodeCopy/';

换成这个就行了，因为大小写的问题，找不到对应的JS文件

izz520 发表于 2019-7-23 15:03

谢谢大大分享，正好使用typecho，应该有用

呢喃发表于 2019-7-23 15:08

收藏了丫, 虽然不用 typecho, 总有用的时候

ray1003 发表于 2019-7-23 15:28

收藏了，谢谢楼主分享{:1_893:}

libertarian 发表于 2019-7-23 15:32

感谢楼主，收藏了。

黑化琉璃 发表于 2019-7-23 17:33

感谢楼主，收藏了。

aiask 发表于 2019-7-23 22:10

感谢楼主的开源精神和无私奉献，能帮助很多人，

Auandzu 发表于 2019-11-13 21:19

步不知道为什么就是用不了

我来试试 发表于 2021-1-15 12:38

谢谢分享

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

Typecho复制代码插件