一、下载并配置 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() 函数。