eWebeditor编辑器使用方法

hududanyzd

浏览: 774904 次

最近访客更多访客>>

wangyy

u012363178

jackzhao1980

翮翮专属

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1358)

社区版块

存档分类

2012-01 ( 28)
2011-12 ( 54)
2011-11 ( 57)
更多存档...

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

从eWebEditor产品网站下载最新的版本。
解压下载下来的压缩文件到你本机（确定eWebEditor内的目录文件结构层次保持与压缩文件内一致）。
在你的站点上建一个新文件夹，如：/eWebEditor/（最好在要目录下，调用更方便）。
把eWebEditor在的所有文件及目录上传到你站点刚才建立的文件夹中。
运行例子文件（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的调用是非常简单，基本上只是在原来的使用中加入一行代码。

标准调用：

你原来可能是：

<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>
例子：修改表单

你原来可能是：

现在是：

<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 : 要过滤掉的格式集，用逗号分隔多个
使用例子如下：

先包含扩展功能文件，以下路径相应更改

<%
' 此例只过滤SCRIPT标签，即意味着内容中的客户端脚本不会生效，您可根据实际的需要加入其它标签。
sContent = eWebEditor_DeCode(sContent, "SCRIPT")
%>
更多使用说明请参看[代码实例]，每个程序文件中都有足够详细的注释。

编辑人员使用说明
界面概述：

所见即所得的在线编辑器界面主要分为以下三大部分：

菜单栏
编辑器顶部为菜单栏，主要放置各种编辑功能的选项及按钮图标，使用者只需点击图标或选择相关选项即可实时对编辑栏编辑的内容进行添加或修改、修饰。
编辑栏
编辑器中部空白处为编辑栏，主要是供使用者输入及编辑内容所用，同时所编辑的内容全部都是所见即所得，但有部分内容，如活动的图像、文字、电影等在编辑状态下只会呈现静止状态，需使用者转换到预览状态方可真实再现。
状态栏
编辑器底部为状态栏，主要放置转换编辑器状态的按钮图标，状态共分为：代码状态、编辑状态（默认）、文本状态、预览状态。具体每种状态的作用请详见帮助中心目录的“状态栏使用说明”。
菜单栏使用说明：

编辑器菜单栏图标功能使用说明如下：

：设置字体样式为粗体。
：设置字体样式为斜体。
：设置字体样式为带下划线。
：设置字体样式为带中划线。
：设置字体样式为上标。
：设置字体样式为下标。
：设置字体变大。
：设置字体样变小。
：设置内容向左对齐。
：设置内容向右对齐。
：设置内容向中对齐。
：设置内容两端对齐。
：设置内容以编号列表形式排列。
：设置内容以列表项形式排列。
：减少内容的缩进量。
：增加内容的缩进量。
：设置字体的颜色。
：设置字体背景颜色。
：设置对象背景颜色。
：剪切指定内容。
：复制指定内容。
：粘贴剪贴板中的内容。
：以纯文件形式粘贴剪贴板中的内容。
：粘贴从Word中复制的内容，并去除冗余格式。
：删除指定内容。
：删除指定内容的格式。
：撒消上次操作。
：恢复上次操作。
：选定所有内容。
：取消选定的内容。
：表单菜单。
：插入文本输入框。
：插入文字区。
：插入单选按钮。
：插入复选框。
：插入下拉框。
：插入按钮。
：插入或修改字幕，即滚动文字。
：插入水平尺。
：插入换行符。
：插入段落。
：插入或修改超级链接。
：删除超级链接或标签。
：图形热点链接。
：标签管理。
：表格菜单。
：插入表格...。
：表格属性...。
：单元格属性...。
：拆分单元格...。
：表格行属性...。
：插入行（在上方）。
：插入行（在下方）。
：合并行（向下方）。
：拆分行。
插入列（在左侧）。
：插入列（在右侧）。
：合并列（向右侧）。
：拆分列。
：在指定位置插入或修改栏目框。
：在指定位置插入或修改网页帧。
：在指定位置插入或修改图片。
：在指定位置插入Flash动画。
：在指定位置插入自动播放的媒体文件。
：在指定位置插入其它文件。
：远程自动文件获取。
：在指定位置插入EXCEL表格。
：在指定位置插入特殊字符。
：指定位置的背景图片管理。
：在指定位置插入表情图标。
：在指定位置插入当前日期。
：在指定位置插入当前时间。
：转换指定内容为代码样式。
：转换指定内容为引用样式。
：显示或隐藏指导方针。
：查找替换功能。
：新建文档功能。
：相对或绝对位置设置功能。
：上移一层。
：下移一层。
：缩放菜单。
：增高编辑区。
：减小编辑区。
：转为代码状态。
：转为编辑状态。
：转为文本状态。
：转为预览状态。
：打印全页。
：保存内容到相关联的表单。
：打开全屏编辑。
：关闭全屏编辑并返回。
：弹窗保存并返回。
：查看在线使用帮助。
：关于编辑器的版权信息。
：直接访问eWebEditor站点。
：工具菜单。
：文件视图菜单。
：编辑菜单。
：对象效果菜单。
：组件菜单。
编辑器菜单栏下拉选项功能使用说明如下：

段落格式：设置文字内容的段落格式，使内容更加条理及便于阅读。
特殊字体格式：设置文字内容的特殊格式，包括删除线、飞行文字、移动文字等。
选择字体：设置文字内容的字体格式，可用自定义字体功能设置列表中没出列出的字体格式。注：需浏览者操作系统安装有相应字体文件才可正常显示自定义的字体。
字号：设置文字内容的大小。共分7种尺寸。
缩放：放大或缩小编辑区内的内容。
注意事项：

部分提供修改功能的按键或选项，只需选择原来插入的对象，再按同一按键或选项，即可进行修改。
部分提供设置功能的按键或选项，都可以通过再按一次按键或选项来取消前一次的设置。
编辑栏使用说明：

编辑器编辑栏主要放置供使用者编辑内容的编辑框，若内容超出框架宽度或长度的话，会自动出现滚动条。另外还可通过状态栏的状态转换可转换编辑框的不同编辑状态。
状态栏使用说明：

编辑器状态栏放置有编辑器状态转换栏，共有四种状态可供转换，详细如下：

编辑状态(默认)，在此状态下所有编辑的内容皆为所见即所得的方式。

代码状态，在此状态下所有编辑的内容皆以HTML标记源代码方式显示或编辑。

文本状态，在此状态下所有编辑的内容皆以纯文本方式显示或编辑。

预览状态，在此状态下所有内容皆以不可编辑的页面输出方式显示，可利用此状态预览编辑内容输出后的效果。
使用技巧：

乾坤小挪移
如果在网络上看到哪篇文章或新闻甚至页面觉得不错的话，可以用鼠标将相应页面内容全部选择起来后，直接拖动或复制到编辑器的编辑框即可，而且原页面上的图片、文字、CSS样式、动态效果等都能原封不动地转移到编辑框，不用修改或添加任何代码。
巧用插入自动播放媒体功能
插入自动播放媒体功能可以自动识别各种媒体格式并用相应的播放器在页面自动播放，而且这个功能还能识别图像文件，压缩文件等。大家可以充分利用此功能编辑出更多色声俱全的内容。
灵活运用预览状态
编辑内容中带有动态效果、即时播放媒体、GIF动画等活动内容时，编辑状态中只能显示静态的图像或播放器界面，这时只需要将状态转换为预览状态就可以马上看到这些内容的动态实时效果，如果想继续编辑的话，只需再转换到编辑状态即可。

分享到：