Typecho复制代码插件

tuziang

介绍：

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





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


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


具体JavaScript代码：

[JavaScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

//html5 给typecho添加 复制代码 功能 // by 兔子昂 var codeblocks = document.getElementsByTagName("pre") //循环每个pre代码块，并添加 复制代码   for (var i = 0; i < codeblocks.length; i++) {     //显示 复制代码 按钮     currentCode = codeblocks[i]     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[i].onmouseover = function () {             codeblocks[i].childNodes[1].style.visibility = "visible"         }           //执行 复制代码 功能         function copyArticle(event) {             const range = document.createRange();               //范围是 code，不包括刚才创建的div             range.selectNode(codeblocks[i].childNodes[0]);               const selection = window.getSelection();             if (selection.rangeCount > 0) selection.removeAllRanges();             selection.addRange(range);             document.execCommand('copy');               codeblocks[i].childNodes[1].innerHTML = "复制成功"             setTimeout(function () {                 codeblocks[i].childNodes[1].innerHTML = "复制"             }, 1000);             //清除选择区             if (selection.rangeCount > 0) selection.removeAllRanges(); 0         }         codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);       }(i);       !function (i) {         //鼠标从代码块移开 则不显示复制代码按钮         codeblocks[i].onmouseout = function () {             codeblocks[i].childNodes[1].style.visibility = "hidden"         }     }(i); }

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

我来试试

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

Plugin.php  文件里面的  第78行

[PHP] 纯文本查看 复制代码

?

1	$path = Helper::options()->pluginUrl . '/CodeCopy/';

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

izz520

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

呢喃

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

ray1003

收藏了，谢谢楼主分享

libertarian

感谢楼主，收藏了。

黑化琉璃

感谢楼主，收藏了。

aiask

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

Auandzu

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

我来试试

谢谢分享