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

 

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

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

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

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

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

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

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

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

//本次修改是针对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=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);      }  }     

 

有了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博客中就可以运行测试代码了，添加一篇文章试试。祝你好运！