在之前一篇文章:http://www.lijialong.name/vspaste.html中,加入了代码折叠功能,以及其他一些修正。可惜的是,没有代码折叠功能,这个
功能其实很早之前就已实现了,只是比较忙,今晚抽空整理了下。请看下文~
本次修正:
代码折叠功能在上面的链接一文中讲过了,这里讲下代码复制功能。
使用的是一个叫ZeroClipboard的开源项目,一个跨浏览器实现内容的复制粘贴,基于JavaScript+Flash。如何使用它,请自行在它的CodeGoogle上查看。
下面是此次修正的VSPaste插件的一个外部JS文件,正是由此文件实现了代码的折叠与复制!
外部JS文件(Copy Code)
//根据元素id获取元素对象 function $_global(id) { return document.getElementById(id); } //复制代码 function copy(copy_id,codeDiv_id) { var clip = new ZeroClipboard.Client(); clip.setText(''); clip.setHandCursor( true ); clip.setCSSEffects( true ); clip.addEventListener('complete',function(client, text){alert("代码复制成功!");}); clip.addEventListener('load',function(client){alert("ZeroClipboard已准备好复制代码了!请确定后再次点击Copy Code!");}); clip.setText($_global(codeDiv_id).innerText); clip.glue(copy_id); } //显示隐藏代码块 function showAndHideCode(obj,source_ID_1,source_ID_2,flag) { obj.style.display="none"; if(flag=="open") { $_global(source_ID_2).style.display="inline"; } else if(flag="close") { $_global(source_ID_2).style.display="none"; } $_global(source_ID_1).style.display="inline"; }
代码很简单~一般人都看得懂~
下面是我自己使用的外部CSS文件(仅供参考,可自行修改)
外部CSS文件(Copy Code)
/*复制代码 按钮*/ .btnCopy{ color:#ff0000; font-size:8pt; } /*容纳pre的DIV*/ .codeDiv{ width:100%; height:100%; overflow:auto; cursor:text; } /*容纳代码的pre*/ .code{ background:#EDEDED; border-left:solid 3px #6CE26C; padding: 5px; margin: 0 5px 0 5px; font-family: "微软雅黑,"Verdana,Helvetica, Arial, "宋体"; } /*显示代码的图片*/ .openimg{ margin-right:3px; vertical-align:-4px; } /*折叠代码的图片*/ .closeimg{ display:none; margin-right:3px; vertical-align:-4px; } /*显示的提示文本*/ .ShowMsg{ color:#ff0000; }
上诉的js文件,自行放入你网站的已有js文件内,或者新建一个,CSS同样。
最后,你需要另外引用【代码复制】所需要的ZeroClipboard文件,一个js文件,一个swf文件
注意:swf文件的路径是在js文件内定义的,而我们只需要在自己的网站上引入js文件路径即可。
可以去ZeroClipboard官网,下载最新的js文件,或者使用http://www.lijialong.name/ZeroClipboard.js
最后是VSPaste文件下载。
下载:Vspaste(修正)