如何给博客园加上运行代码功能

原创：冰极峰转载请注明出处

对于运行代码这个功能，我之前也写过一篇文章，这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的，而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入，所以这里再啰嗦一下。

首先，在博客园中添加文章时，如果要用到代码运行功能，你需要将下面这段结构加入到文章中，你可能打开文章的HTML模式来添加这段代码，如下所示：

<textarea class="codetext" rows="12">

</textarea>
<div style="clear: both">
  <input class="button" onclick="runCode(0)" type="button" value="运行代码">
  <input class="button" onclick="copyCode(0)" type="button" value="复制代码">
  <input class="button" onclick="saveCode(0)" type="button" value="另存代码">
</div>

再定义一下这个运行框的样式，你可以加入到你自已博客的样式表中，如下所示：

Code

下面的是核心JS功能，你可以将它单独定义为一个外部脚本js文件中，然后在页面的头部引用。

<script type="text/javascript">
function runCode(num){
    var obj=document.getElementsByTagName("textarea");
    for(var i=0;i<obj.length;i++){
        if(num==i){
            var newWin=window.open('',"_blank",'');
            newWin.document.open('text/html','replace');
            newWin.opener=null
            var testCode=obj[num].value;
            newWin.document.write(testCode);
            newWin.document.close();
        }
    }
}
/*****保存代码为html页面，现阶段只支持IE******/
//firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename');
function saveCode(num){
    var obj=document.getElementsByTagName("textarea");
    for(var i=0;i<obj.length;i++){
        if(num==i){
            var newWin=window.open('','_blank','top=10000');
            newWin.document.open('text/html','replace');
            var testCode=obj[num].value;
            newWin.document.write(testCode);
            newWin.document.execCommand('saveas','','code.htm');
            newWin.close();
        }
    }
}
function copyCode(num){
    var obj=document.getElementsByTagName("textarea");
    for(var i=0;i<obj.length;i++){
        if(num==i){
            var testCode=obj[num].value;
            if(copy2Clipboard(testCode)!=false)
            {
                alert("生成的代码已经复制到粘贴板，你可以使用Ctrl+V 贴到需要的地方去了哦！  ");
            }
        }
    }
}
copy2Clipboard=function(txt){
    if(window.clipboardData){
        window.clipboardData.clearData();
        window.clipboardData.setData("Text",txt);
    }
    else if(navigator.userAgent.indexOf("Opera")!=-1){
        window.location=txt;
    }
    else if(window.netscape){
        try{netscape.security.PrivilegeManager.enablePrivilege(
"UniversalXPConnect");
    }
    catch(e){
        alert("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试");
        return false;
    }
    var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
    if(!clip)
    return;
    var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
    if(!trans)
    return;
    trans.addDataFlavor('text/unicode');
    var str=new Object();
    var len=new Object();
    var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
    var copytext=txt;str.data=copytext;trans.setTransferData("text/unicode",str,copytext.length*2);
    var clipid=Components.interfaces.nsIClipboard;if(!clip)
    return false;
    clip.setData(trans,null,clipid.kGlobalClipboard);
    }
}
</script>

好了，经过如上几步后，你的文章中就加入了运行代码功能了。

看看下面的运行功能：

你可点击测试一下

posted @ 2009-05-02 22:49 Biny 阅读(6043) 评论(6) 编辑收藏举报

刷新页面返回顶部