eWebEditor的使用

 

一、下载并配置 eWebEditor 控件

下载完毕后，将压缩包进行解压，然后移动到站点所在目录(如F:\news\edit\)的任何位置中。这里将其保存到站点news根目录下面的edit文件夹中。

这样便完成了eWebEditor控件的下载及其配置。可以看到，该控件的使用其实非常方便，用户只需将其释放到站点目录下，而无需在 IIS 服务器中进行任何的设置。

二、了解 eWebEditor 控件

       eWebEditor 控件是一个所见即所得的在线编辑器，它可以和前台中的文本域或隐藏域表单控件进行绑定，并且实现控件之间数据的传递与交互。

       要实现 eWebEditor 与表单控件的通信，用户必须首先了解一下该控件的通信编程接口。简单来说，就是要知道如何在网页中调用该控件。

调用：

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

 

标准调用语句：

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

</iframe>

　可以看到，这是一个iframe表单控件，也是平时所说的浮动框架。该控件包括了6个参数，下面将分别对其进行一一说明，具体见附录表一。

附录表一　　相关参数说明

参数名称	说明
ID	用于在网页标识iframe浮动框架，从而区别其同类的表单控件
src	用于调用eWebEditor控件。其中，用户须将"/ewebeditor.asp"替换为eWebEditor控件在站点中的实际路径。例如将其保存到站点news根目录下面edit文件夹后,则
	"/ewebeditor.asp"须相应更改为"edit/ewebeditor.asp"
	需要注意的是,"ewebeditor.asp"后面还附带两个URL变量,其名称分别为"id"和"style"。
	其中,该变量的意义分别为:
	(1)id:用于相关联的保存编辑内容的表单控件名,也就是与eWebEditor控件绑定的表单控件名称
	(2)style:使用的样式名,可以是标准的样式名(standard)或自定义的样式名
frameborder	用于设置iframe浮动框架的边框,其值只能为0或1。
	当frameborder等于0时,表示无边框；等于1时,则表示显示框架的边框
scrolling	用于设置iframe浮动框架是否出现滚动条。它有3个值,分别为no、auto和yes。当frameborder
	等于no的时候,表示没有滚动条:当为yes时,则表示有滚动条。如果为auto时,则当浮动框
	架内设的高度或长度小于嵌入到框架内对象的高度或长度时,出现滚动条
width	用于设置iframe浮动框架的宽度
height	用于设置iframe浮动框架的高度

参数说明：

·         /ewebeditor.asp应改为你实际安装的路径

·         参数id：相关联的表单项名，也就是提交保存页要引用的表单项名，多个调用时，请保证id不同，可参见后面例子

·         参数style：使用的样式名，可以是标准的样式名或自定义的样式名，如果使用标准standard可留空

·         width,height：根据实际需要设置，eWebEditor将自动调整与其适应

·         在后台管理中，可以得到每个样式的最佳调用代码所有入口参数：(即：eWebEditor.asp?后面的参数)

了解 eWebEditor 控件调用的相关参数设置后，用户便可以根据自身的需要定制在线编辑器的样式、外观，以及和哪个表单控件进行绑定。

 

 

下面将根据新闻发布系统制作的需要，定义在线编辑器的高度、宽度和样式分别为350、550和standard，并且它与一个名称为”news”的隐藏域进行绑定。那么，根据参数定义，其完整的调用语句如下：

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

</iframe>

三、建立表单控件并绑定 eWebEditor控件

eWebEditor 控件相当于一个功能模块，它可以和“文本域”和“隐藏域”这两种表单控件进行绑定。不过，由于这两种绑定方式的实现原理是一致的，所以下面将以“隐藏域”为调用表单控件，简要介绍表单控件和 eWedEditor 控件的绑定。

(1)、打开新闻添加页面 (addnew.asp), 然后在新闻内容左侧的单元格中插入一个隐藏域，并设置其名称为 "news"。

(2)、将鼠标焦点定位于隐藏域的右侧，然后切换到“代码”视图，在当前的位置中输入下列的代码片断：

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

</iframe>

可以看到，上面代码片断中的URL参数id的值为”news”，它和隐藏域的名称是一致的。这样便完成了表单控件与eWebEditor控件的绑定。

四、提交表单数据

切换到“服务器行为”控制面板，单击＋按钮，然后在下拉菜单中选择“插入记录”命令。最后，在弹出的“插入记录”对话框中，进行参数设置。

可以看到，新闻内容字段所对应的表单控件为名称为“news”的隐藏域，其他的参数设置则保持不变。这样，用户便无需考虑 eWebEditor 控件的执行原理，而只需将其绑定到其他表单控件便可以了。

五、输出新闻内容

       数据提交到后台数据库后，在新闻详细页面(showdetail.asp) 中，用户只需将字段 "content" 绑定到页面的相应位置中便可以了，无需设置新闻内容在输出到页面之前必须通过HTMLcode() 函数。