ewebedit 使用方法

来源:互联网 发布:php汽车门户系统 编辑:程序博客网 时间:2024/04/29 05:29

服务器要求:

eWebEditor 是基于WEB多种语言开发的一套网络在线编辑系统模块,正常使用该软件,跟据您选择的语言环境,只要能满足此语言的运行即可,无特殊要求。

  • eWebEditor ASP版:
    满足ASP运行环境,无特殊要求。
    推荐:Windows 2000+IIS5.0+IE5.0环境(即win2000的默认安装)

  • eWebEditor PHP版:
    满足PHP运行环境,无特殊要求,可在Window系列系统或其它非Window系统。

  • eWebEditor JSP版:
    满足JSP运行环境,无特殊要求,可在Window系列系统或其它非Window系统。

  • eWebEditor ASP.NET版:
    满足ASP.NET运行环境,无特殊要求。
    推荐:Windows 2003+IIS6.0+IE6.0环境(即win2003的默认安装)

客户端要求:

因为编辑器使用了JAVASCRIPT客户端语言,如果浏览器不支持JAVASCRIPT或关闭了这个功能的话,编辑器就不能正常工作了。另外,编辑器还需要使用者的浏览器版本是IE5.5以上,否则编辑器的可视HTML编辑功能将不能正常工作,但仍然可以使用纯文本方式进行编辑。

  • JavaScript支持
  • IE5.5+

安装:

安装是非常容易的,首先你要做的就是把eWebEditor文件上传到你的网站,请按以下步骤进行:

  1. 从eWebEditor产品网站下载最新的版本。
  2. 解压下载下来的压缩文件到你本机(确定eWebEditor内的目录文件结构层次保持与压缩文件内一致)。
  3. 在你的站点上建一个新文件夹,如:/eWebEditor/(最好在要目录下,调用更方便)。
  4. 把eWebEditor在的所有文件及目录上传到你站点刚才建立的文件夹中。
  5. 运行例子文件(http://www.yoursite.com/ewebeditor/example/test.asp),看是否运行正常。OK。

设置:

eWebEditor带有后台管理功能,你可以方便对样式,上传文件等进行管理。设置请注意:

  • 后台管理的登录地址:http://www.yoursite.com/ewebeditor/admin_login.asp
  • 第一次安装请用默认用户admin和密码admin登陆后台,并进入管理页面更改管理用户和密码
  • 建议安装好后,更改数据库名字,以免别人恶意下载,默认数据名为db/ewebeditor.mdb,更改名字后请修改include/startup.asp文件中相关连接
  • 系统自带有几个标准样式,不允许修改,在你新增样式时,最好先预览,然后通过“拷贝标准样式”的方式,以达到快速新增样式的目的,且不易出错

调用:

eWebEditor的调用是非常简单,基本上只是在原来的使用中加入一行代码。

标准调用:

<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

参数说明:

  • /ewebeditor.asp应改为你实际安装的路径
  • 参数id:相关联的表单项名,也就是提交保存页要引用的表单项名,多个调用时,请保证id不同,可参见后面例子
  • 参数style:使用的样式名,可以是标准的样式名或自定义的样式名,如果使用标准standard可留空
  • width,height:根据实际需要设置,eWebEditor将自动调整与其适应
  • 在后台管理中,可以得到每个样式的最佳调用代码

所有入口参数:(即:eWebEditor.asp?后面的参数)

  • id:相关联的保存编辑内容的表单项名,也就是提交保存页要引用的表单项名
  • style:使用的样式名,可以是标准的样式名或自定义的样式名,如果使用标准standard可留空
  • originalfilename:相关联的保存上传原文件名列表的表单项名,必须是input类型,可以带onchange事件[例子]
  • savefilename:相关联的保存上传保存文件名列表的表单项名,必须是input类型,可以带onchange事件[例子]
  • savepathfilename:相关联的保存上传保存文件名(带路径)列表的表单项名,必须是input类型,可以带onchange事件[例子]

例子:新增表单

你原来可能是:

<textarea name="content1" rows=10 cols=50></textarea>

现在是:

<input type="hidden" name="content1" value="">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

或者

<textarea name="content1" style="display:none"></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

例子:修改表单

你原来可能是:

<textarea name="content1" rows=10 cols=50><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>

现在是:

<input type="hidden" name="content1" value="<%=Server.HTMLEncode(oRs("D_Content"))%>">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

或者

<textarea name="content1" style="display:none"><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

注意事项:

  • eWebEditor允许在同一表单里有多个,但请保证id在整个网页中是唯一的。即如果已经用了input name=content1第二个调用就要input name=content2之类的。
  • 在使用textarea作为原表单项时,要加入style="display:none"。
  • 在input修改时一定要用value="",而不是value=''。
  • 一定要在动态加入value值时用Server.HTMLEncode()进行处理,否则有可能内容被截掉。

高级调用:

eWebEditor还提供了一些高级调用的方法,如下,但请保证大小写一致:

  • getHTML():返回编辑器的内容
  • setHTML( html ):设置编辑器的内容
  • insertHTML( html ):在当前选择处插入内容
  • appendHTML( html ):在文档末尾追加内容
  • setMode( NewMode ):改变当前编辑状态
    参数NewMode:
    • "CODE":代码状态
    • "EDIT":编辑状态
    • "TEXT":文本状态
    • "VIEW":预览状态

使用例子如下:[在线演示]

<Script Language=JavaScript>
// 取编辑器内容
var sHTML = eWebEditor1.getHTML();
// 设置编辑器内容
eWebEditor1.setHTML('<b>Hello My World!</b>');
// 在当前选择处理插入
eWebEditor1.insertHTML('This is Insert Function!');
// 在尾部追加内容
eWebEditor1.appendHTML('This is Append Function!');
// 改变编辑器状态为代码编辑状态
eWebEditor1.setMode('CODE');
</Script>

取值说明:

由于eWebEditor有对大表单进行自动处理,所以在取值时有
些不同,具体如下:

原来是

<%
sContent = Request.Form("content1")
%>

现在是

<%
For i = 1 To Request.Form("content1").Count
  sContent = sContent & Request.Form("content1")(i)
Next
%>

接口:弹窗调用说明:

v2.7.5版本后加入了弹窗调用接口的扩充功能,能实现通过一个链接弹窗打开编辑器,并将编辑的内容保存入指定的表单域。

在eWebEditor根目录下文件名为PopUp.asp,提供的接口传入参数如下:

  • style : 样式名
  • form : 要返回或设置值的表单form名
  • field : 要返回或设置值的表单项textarea名

使用例子如下:[在线演示]

<HTML>
<BODY>
<Script Language=JavaScript>
function eWebEditorPopUp(style, form, field) {
  var oPopUp = window.open("PopUp.asp?style="+style+"&form="+form+"&field="+field, "PopUp"+form+field, "toolbar=no,location=no,directories=no,status=yes,menubar=no,
scrollbars=yes,resizable=yes");
}
</Script>
<FORM ACTION="" METHOD="" NAME="myForm">
<TEXTAREA NAME="myField" COLS="50" ROWS="5"></TEXTAREA>
<INPUT TYPE="BUTTON" VALUE="HTML编辑" ONCLICK="eWebEditorPopUp('s_popup', 'myForm', 'myField')">
</FORM>
</BODY>
</HTML>

接口:前台解释(限制)扩充功能说明:

此功能禁用某些标签,如出于安全考虑的Script标签,等。各版本可能有所不同,请参看实际文件中的说明:

    Function eWebEditor_DeCode(s_Content, sFilters)
  • s_Content : 要转换的数据字符串
  • s_Filters : 要过滤掉的格式集,用逗号分隔多个

使用例子如下:

先包含扩展功能文件,以下路径相应更改
<!--#include file = "Include/DeCode.asp"-->

<%
' 此例只过滤SCRIPT标签,即意味着内容中的客户端脚本不会生效,您可根据实际的需要加入其它标签。
sContent = eWebEditor_DeCode(sContent, "SCRIPT")
%>
 

ewebeditor得到编辑器的值或让其得到焦点

 

<script language="javascript">
function check_input()
{
  if(frames.eWebEditor1.eWebEditor.document.body.innerHTML==''){
 alert("内容不能为空");
 frames.eWebEditor1.eWebEditor.document.body.focus();
    return false;
  }
}
</script>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

在父窗体里面document.frames[]这样写[]里可以写iframe的索引或者名字,得到的是iframe的window对象,document.frames[0].document.forms[0].text.value,这样写是得到子iframe里的第一个表单的某文件框的值。

另:

=============
对于分帧的页面
可以使用parent.frames("帧的name")、top.frames("帧的name")来引用不同的帧,后面的引用和同一页面内市相同的,多重的parent也是支持的。
例如:
parent.frames("frame1").document.all.link1
top.frames("frame1").document.all.link1

=============

对于window.open()开的窗口
可以使用var newwin=window.open(),然后使用newwin来引用新窗口,后面的引用和同一页面内是相同的;新窗口可以使用window.opener来引用打开它的窗口,可以简写作opener,例如:
var newwin=window.open()
父窗口(这里是使用window.open()方法的窗口):
newwin.document.all.link1 //父窗口这句可引用新窗口中的对象
子窗口(window.open()方法打开的窗口):
opener.document.all.link1 //子窗口这句可引用父窗口的对象

多重opener也是支持的,例如:opener.opener.document.all.link1

 

原创粉丝点击