网络编程
位置：首页>> 网络编程>> JavaScript>> 如何给eWebEditor编辑器加上运行代码框功能

如何给eWebEditor编辑器加上运行代码框功能

　来源：asp之家　发布时间：2007-09-25 07:02:00　

标签：运行,编辑器,eWebEditor

这个功能现在很多网站，论坛都有，本站也有呵呵！如果您还不知道如何实现这个功能，没关系看看本文吧！我将给你介绍怎么给你的网站加上运行代码框的功能，让你的eWebEditor在线编辑器也有这个功能！

要实现这个功能其实也不复杂，如下的网页代码就有了运行代码框的功能了：

如果你只想知道这个运行功能怎么实现用上面的代码就可以了，如果你想在eWebEditor编辑器中加上这个功能(我用的这个编辑器版本没有这个功能，不知道新版的有没有，不过还是自己动手来的快)，那么请看下面：

首先在你想要有运行代码框功能的文章页面代码中加上：


<script language=javascript>


function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}

</script>


或者去除头尾把那两个函数放在单独的JS文件中也可以加在其它的单独JS文件里，调用！

然后就是装运行代码的文本框，运行和复制按钮了：


<textarea  name="run_Code"></textarea><br><input onclick="runCode()" type="button" value="运行代码"> <input type="button" value="复制代码" onclick="copycode(run_Code)">[提示：你可先修改部分代码，再按运行]


关键就是上面这一段代码怎么用到编辑器中，其实也不难，我的做法就是替换掉编辑器的一个按钮功能改为运行代码框。打开editor.js找到：


case "big":   // 字体变大
  insertHTML("<big>" + sel.text + "</big>");
  break;


改为：


case "big":   // 字体变大
  insertHTML(" <textarea  name=run_Code>" + HTMLEncode(sel.text)+ "</textarea><br><input onclick=runCode() type=button value=运行代码> <input type=button value=复制代码 onclick=copycode(run_Code)>[提示：你可先修改部分代码，再按运行]");
  break;


当然你也可以改其它你平常用不到的按钮。

如果你想一个页面添加多个运行代码框，请看下一页。

1
2 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com