给CSDN博客添加代码运行框，兼容FF

给CSDN博客添加代码运行框，兼容FF

---

本站原创：biny  转载请注明出处

blog:http://blog.csdn.net/by20081213/archive/2009/02/05/3863264.aspx

---

 

csdn博客后台没有代码运行的功能，而作为前端人员，经常会用它来测试html代码，于是就想在自已的博客中加入这个功能，本来认为这是一件非常简单的事，然而实际做起来的时候却遇到了麻烦，以此作个记录。

谈谈我的改博过程，首先在google上找了一下，搜出一大堆，可很少有几个能兼容FF的。最后我找到杨正祎（阿一）的博客，上面有一段比较好的运行代码（在此先感谢一下），满足了FF的兼容性（只是复制代码功能因为FF本身的安全性问题不能解决外，其它基本上都可以运行了）。本来以为只要将这段JS一放进去就OK,但是...

csdn博客后台文章添加系统中有一个最大的麻烦是你不能在文章的html编写模式中写入一个自定义的ID值，比如你想写自定义的容器id属性，并想给它设置样式，当你添加完成提交文章后，在网页中一查看源码，你会发现你赋于的ID已经不见踪影了。哎...看来他们是给我过滤掉了ID，没了ID，我要想用JS去查找某个容器就遇到麻烦。

算了，另想办法吧，毛主席说过“自已动手，丰衣足食”。咱们来DIY一下。

1.阿一的代码只是针对一个运行框，我想达到的是多个运行框都可以在一个页面中的重复调用。

2.不能用ID给textarea容器，就用getElementsByTagName来获取集合吧，然后从中取出当前正在调用的那一个。

3. 最后修改后的代码就成了下面的样子。先放出全部JS代码，如下面所示：

//原著：http://www.cnblogs.com/JustinYoung///修改：biny//本次修改是针对CSDN博客后台文章添加系统，兼容FF的代码运行框功能,FF下的另存为功能不受支持,其它的可以使用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=nullvar 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);}}

有了js代码，好了，添加文章时还要注意将下面这段结构添加到JS上面去,先添加一个空的textarea容器，然后是三个控制按钮。

<textarea rows="12" cols="75">测试内容</textarea><div style="clear:both;"><input onclick="runCode(1)" type="button" value="运行代码" /> <input onclick="copyCode(1)" type="button" value="复制代码" /> <input onclick="saveCode(1)" type="button" value="另存代码" /></div>

 

要注意的是：在添加文章时要注意给runCode(1)赋予textarea的序号值，从0开始。

 

这是第一个测试框，我可以运行哦！

这是第二个测试框，我也可以运行！

经过上面的处理后，基本上在CSDN博客中就可以运行测试代码了，添加一篇文章试试。祝你好运！