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

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

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

本次修正：

1. 自定义选择【代码折叠】【代码复制】功能，比如：只折叠，只复制，即折叠又复制，即不折叠也不复制
2. 以外部CSS文件形式，可以自定义代码样式
3. 以外部JS文件形式实现代码的折叠与复制功能
4. 以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(修正)