重新修正的Windows Live Writer代码高亮插件VSPaste

在之前一篇文章：http://www.lijialong.name/vspaste.html中，加入了代码折叠功能，以及其他一些修正。可惜的是，没有代码折叠功能，这个

功能其实很早之前就已实现了，只是比较忙，今晚抽空整理了下。请看下文~

本次修正：

自定义选择【代码折叠】【代码复制】功能，比如：只折叠，只复制，即折叠又复制，即不折叠也不复制

以外部CSS文件形式，可以自定义代码样式

以外部JS文件形式实现代码的折叠与复制功能

以2和3，减少了生成相同的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(修正)