查看完整版本: 给zblog加上运行代码功能

给zblog加上运行代码功能

这个小功能最先是我借鉴蓝色理想的代码修改而成的，最开始只是针对单代码框和ie浏览器，一直没有更新。看到有人把它转了过来，没有注明来源，而且是没有修改的不兼容版本，下面是我更新过的兼容版本。在zblog1.6final版本上完成，FIREFOX1.5,IE6.0版本下测试通过。其它版本请网友参照修改。

1、在script/common.js里面增加
//*********************************************************
// 目的： 代码运行框
// 输入： obj
// 返回：
//*********************************************************
function copycode(obj) {
var rng = document.body.createTextRange();
var obj1=document.getElementById(obj)
rng.moveToElementText(obj1);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}

function runCode(obj) {
var winname = window.open('', "_blank", '');
   var obj1=document.getElementById(obj)
winname.document.open('text/html', 'replace');
    winname.opener = null // 防止恶意修改
winname.document.writeln(obj1.value);
winname.document.close();
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
   var obj1=document.getElementById(obj)
winname.document.open('text/html', 'replace');
winname.document.writeln(obj1.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}

2、func/c_function.asp，查找Function TransferHTML(source,para),把
If Instr(para,"[space]")>0 Then source=Replace(source," "," ")
注释掉。

找到objRegExp.Pattern="(\[CODE\])(.+?)(\[\/CODE\])"
      strContent=objRegExp.Replace(strContent,"<textarea class=""code"" name=""runcode0"" rows=""10"" cols=""50"">$2</textarea>")
修改为
Dim codeNum,rndStr

codeNum=0
Randomize
rndStr=int(rnd*100)
  
strContent=objRegExp.Replace(strContent,"<textarea class=""code"" name=""code"&rndStr&codeNum&""" id=""code"&rndStr&codeNum&""" rows=""10"" cols=""50"">$2</textarea><br /><input type=""button"" value=""运行代码"" onclick=""runCode('code"&rndStr&codeNum&"')""> <input type=""button"" value=""复制代码"" onclick=""copycode('code"&rndStr&codeNum&"')""> <input type=""button"" value=""另存代码"" onclick=""saveCode('code"&rndStr&codeNum&"')""> 提示：您可以先修改部分代码再运行")
codeNum=codeNum+1

关于这个rndStr，可以用文章id代替。但是可能产生重复代码框id。保险起见，还是使用了随机函数。


3、重建所有页面。

说明：本修改针对zblog1.6版本,其它版本请对照修改。在firefox1.5,IE6下测试通过。复制和保存功能ff下无效。
如有疑问，请在下面留言。BY 密陀僧，转载请注明来源。

原文请查看[url]http://0e2.net/post/422.html[/url]

[[i] 本帖最后由 密陀僧 于 2006-12-7 02:32 编辑 [/i]]

谢谢密陀僧

谢谢密陀僧
已经加上了运行代码功能~~:lol

纯JS版本的运行代码

初来乍到，先谢个密陀僧！
昨天自己也写了个，纯JS版本的（因为自己不太喜欢改asp的内容——将来升级省得替换），献个丑先:$
是否兼容FireFox，还没来得及测试。自己觉得“另存为”和“复制”功能也比较多余，这里也省略掉了。如果需要Fix Bug或者技术支持，欢迎给我留言:handshake  具体代码如下：

[code]function RunCode() {
  var ele = document.getElementsByTagName("textarea");
  for (var i=0; i<ele.length; i++) {
    with (ele[i]) {
      if (className != "code") continue;
      var o = document.createElement("p");
      var a = document.createElement("a");
      var em = document.createElement("em");
      o.className = "runCode";
      a.href = "javascript:;";
      a.innerHTML = "运行代码";
      a.onclick = function() {
        var win = window.open('', "_blank", '');
        win.document.open('text/html', 'replace');
        win.document.writeln(this.parentNode.previousSibling.value.replace(/\u00a0/gi, " "));
        win.document.close();
      }
      em.innerHTML = "（提示：您可以先修改部分代码再运行）";
      o.appendChild(a);
      o.appendChild(em);
      insertAdjacentElement("afterEnd",o);
    }
  }
}[/code]

目前“运行代码”功能是放在Textarea下方的，如果想放在上方，改动以下代码即可。

insertAdjacentElement("afterEnd",o);

this.parentNode.previousSibling.value

其中的replace(/\u00a0/gi, " ")主要是为了将被c_function.asp文件替换的空格（&nbsp;）和Tab（&nbsp;&nbsp;）还原回来。使用方面当然是在所需页面onload进来即可，有多少个className为code的Textarea，就有多少个“运行代码”功能，够简单吧？

原文地址[url=http://www.douneed.com/post/22.html]http://www.douneed.com/post/22.html[/url]

[[i] 本帖最后由 issac 于 2007-1-5 22:52 编辑 [/i]]

FireFox不支持insertAdjacentElement，不过用变通的方法insertBefore还是能够搞定的。顺便转载了一篇《为FireFox添加IE的方法和属性》，呵呵，现在FF和IE同步多了^_^

原文地址[url=http://www.douneed.com/post/34.html]http://www.douneed.com/post/34.html[/url]

楼主！我太爱你了。

楼主问题来了，1.7版本的好像不行啊

在蓝色理想上用的感觉不错.

1.7可以的啊

不行的，都试了K次了，空出来的地方被<br/>替换了

真的不行的，[url]http://www.91di.com/post/3.html[/url]这个不信你可以试试看

谁能回答我，都等了N天了:'( :'(

在1.7版下面,,自动给DTD声明加上链接...还会多出一些个<br />
等待楼主同步升级到1.7:lol

把修改后的效果放上来..期待有人帮偶解决
[url=http://www.sf111.net/post/14.html]http://www.sf111.net/post/14.html[/url]

抱歉，很久没来。
上述修改对1.7有效，目前我使用的即1.7版本，@悠悠的情况看不到，@ship763的页面似乎已经解决了。

都是强人啊
下一个是我
呵呵

我的按照楼主的修改后有点问题,我用的是1.7版的
我的代码框如果自己在里面写代码,或者把代码复制进去是有效的.
但是如果后台能用ubb 的code 发代码,里面的空格就会变成?

[url]http://tlidea.cn/post/8.html[/url]

高手帮我看一下啊...

楼上有一句代码没有注释掉。

代码文件多出来很多 <br />
运行之后效果出不来了。
页面 如下：[url]http://aibiliwu.cn/post/203.html[/url]

天~ 怎么回事哟。本想用FF帮忙测试一下，没想到几个文章页都打不开。

我的是1.8的，按楼主所述操作了，不过不行。都堆到一起了。并且无法运行，请高手指教。
我的博客：[url]http://leafor.com[/url][守叶人]
问题文章地址：[url]http://leafor.com/Leafor-blog/Footnotes-with-Javascript&CSS.html[/url]

那些站都关了啊？？？？没一个能打开的

不知道这个在1.8下又没有用？