网络编程
位置：首页>> 网络编程>> 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
投稿

猜你喜欢

  • 即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的
  • 序  号前  缀使用的变量/范围或数据类型1a or arrArray2b or blnBoolean3bytByte4
  • 有多少次你在考虑怎样设置数据库时感到为难？其实，如果你在Linux上使用MySQL，就不会有这种情况了。在Linux上使用Webmin图形界
  • 和大多数的语言脚本一样，学习ASP最好的方法就是亲身尝试ASP，使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
  • “模板化”——这也许是视觉设计师通常最不愿意听到的概念，先入为主的会产生“批量生产”、“体力活儿”、“限制思维”等概念，总之都比较负面。但为
  • 动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性，同时也实现了lazy load和按需加载，相比XMLHttp
  • 在安装了IIS以后，缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置，这是不幸的，因
  • Oracle中有多种方法可以向数据库或服务器文件系统上载文件，这里主要介绍如下三种：Oracle HTTP Server（OHS）的mod_
  • 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
  • 查询效率分析：子查询为确保消除重复值，必须为外部查询的每个结果都处理嵌套查询。在这种情况下可以考虑用联接查询来取代。如果要用子查询，那就用E
  • 示例：mysql> DELIMITER //mysql> CREATE PROCEDURE `statis`()  
  • 如何让我的网页自动适应客户端的屏幕分辨率？然后用下列办法进行自动推送：<％ @language="vbscript
  • 原文：http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.nam
  • 首先在我们进行信息系统的开发的时候，数据库的应用必不可少，对于一个企业级别的数据库应用很少是只使用一块磁盘的，很多都是使用RAID磁盘阵列，
  • 带农历的JavaScript日期时间，增加了农历使这款代码更具实用性，很不错，不但有农历，而且还可以显示民国计年，可以判断显示闰月、闰年等，
  • 最近越来越多在博客上写些UX相关的内容作为分享，就涉及到跟普通博文不一样的文章建构问题。文章内容固然很重要，但排版、组织也是提高可读性和用户
  • web2.0的标志是Ajax的异步通信的发掘，给我们带来像google map,google suggest 这样令人惊叹的东西。而Ajax
  • Dreamweaver中一直变色的超级链接，css+javascript实现超级链接变色，当鼠标移动到链接上时，链接的颜色不停闪烁变色。&l
  • Asp(Active Server Pages)是Web服务器端脚本编写环境,可以使用Vbscript/Jscript两种脚本来编写.作为我
  • 阅读上一章：Chapter 4 引用互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从
手机版 网络编程 asp之家 www.aspxhome.com