给Discuz!NT 论坛加上脚本代码运行框的方法,可以直接在论坛使用[html][/html]插入脚本特效的方法.
在做阿里西西论坛http://bbs.alixixi.com时,需要给帖子加入脚本运行框的代码.相关的资料还是很难找.
DZ官方论坛不提供相关的脚本运行框插件,网上公开的也只有PHP版的解决方法,而且还有很多问题.
研究了半天,终于找到解决方法,最终实现的效果如下,可以支持多个脚本运行框:
经过全面调试,完全支持所有脚本调试功能.
方法如下:
1、进入DZ！NT后台>>贴子>>贴子相关Discuz!NT 代码，设置如下图并保存：
替换内容是：
<TEXTAREA id="{RANDOM}" rows="12" cols="95">{1}</TEXTAREA><br><INPUT onclick=runEx("{RANDOM}") type="button" value="运 行"/> <INPUT onclick=doCopy("{RANDOM}") type="button" value="复 制" /> <INPUT class="submit1" onclick=doSave("{RANDOM}") type="button" value="保 存" /> 提示：可先修改代码再按运行
2、修改论坛根目录下的javascript/common.js，在最未尾加入如下脚本代码：
//运行代码
function runEx(cod1) {
cod=document.getElementById(cod1)
var code=cod.value;
if (code!=""){
var newwin=window.open('','','');
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
}
//复制代码
function doCopy2(ID) {
if (document.all){
textRange = document.getElementById(ID).createTextRange();
textRange.execCommand("Copy");
alert('复制成功');
}
else{
alert("此功能只能在IE上有效")
}
}
//复制代码
function doCopy(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function doCopyUrl()
{
document.getElementById("CopyUrl").value=parent.location.href;
document.getElementById("CopyUrl").select();
document.execCommand("copy");
alert("网址成功复制到剪贴板！")
}
//另存代码
function doSave(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
通过以上两步就可以实现代码运行框的效果了，最后添加测试：
通过以上的步骤就可以轻松实现了。
本文为阿里西西Web开发之家原创，转载请注明来自www.alixixi.com。