eWebeditor编辑器使⽤⽅法
在我们管理⽹站时,很容易出现编辑器问题,有些事由于⽹络问题,如⽹速过慢也会导致⽆法上传图⽚,或者是编辑内容,另⼀些就可能是编辑器本⾝的问题,如编辑器和当前浏览器不匹配,这种情况就需要我们重新来装载编辑器,过程⾮常简单,简⾔之,上传和调
⽤!<iframe id="eWebEditor1" src="../edit/ewebeditor.php?id=content" frameborder="0" scrolling="No" width="550" height="350">
</iframe>
<input name="content" type="hidden" id="content" />
每个iframe是⼀个eWebeditor编辑器,src是eWebeditor编辑器所在的相对⽬录。?id=content和下⾯的<input name="content" type="hidden" id="content" />要对应。
安装是⾮常容易的,⾸先你要做的就是把eWebEditor⽂件上传到你的⽹站,请按以下步骤进⾏:
eWebEditor带有后台管理功能,你可以⽅便对样式,上传⽂件等进⾏管理。设置请注意:
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" ></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" ><%=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作为原表单项时,要加⼊。
在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 = HTML();
// 设置编辑器内容
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?&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")
%>
更多使⽤说明请参看[代码实例],每个程序⽂件中都有⾜够详细的注释。
编辑器在线使用编辑⼈员使⽤说明
界⾯概述:
所见即所得的在线编辑器界⾯主要分为以下三⼤部分:
菜单栏
编辑器顶部为菜单栏,主要放置各种编辑功能的选项及按钮图标,使⽤者只需点击图标或选择相关选项即可实时对编辑栏编辑的内容进⾏添加或修改、修饰。
编辑栏
编辑器中部空⽩处为编辑栏,主要是供使⽤者输⼊及编辑内容所⽤,同时所编辑的内容全部都是所见即所得,但有部分内容,如活动的图像、⽂字、电影等在编辑状态下只会呈现静⽌状态,需使⽤者转换到预览状态⽅可真实再现。
状态栏
编辑器底部为状态栏,主要放置转换编辑器状态的按钮图标,状态共分为:代码状态、编辑状态(默认)、⽂本状态、预览状态。具体每种状态的作⽤请详见帮助中⼼⽬录的“状态栏使⽤说明”。
菜单栏使⽤说明:
编辑器菜单栏图标功能使⽤说明如下:
:设置字体样式为粗体。
:设置字体样式为斜体。
:设置字体样式为带下划线。
:设置字体样式为带中划线。
:设置字体样式为上标。
:设置字体样式为下标。
:设置字体变⼤。
:设置字体样变⼩。
:设置内容向左对齐。
:设置内容向右对齐。
:设置内容向中对齐。
:设置内容两端对齐。
:设置内容以编号列表形式排列。
:
设置内容以列表项形式排列。
:减少内容的缩进量。
:增加内容的缩进量。
:设置字体的颜⾊。
:设置字体背景颜⾊。
:设置对象背景颜⾊。
:剪切指定内容。
:复制指定内容。
:粘贴剪贴板中的内容。
:以纯⽂件形式粘贴剪贴板中的内容。
:粘贴从Word中复制的内容,并去除冗余格式。
:
删除指定内容。
:删除指定内容的格式。
:撒消上次操作。
:恢复上次操作。
:选定所有内容。
:取消选定的内容。
:表单菜单。
:插⼊⽂本输⼊框。
:插⼊⽂字区。
:插⼊单选按钮。
:插⼊复选框。
:
插⼊下拉框。
:插⼊按钮。
:插⼊或修改字幕,即滚动⽂字。
:插⼊⽔平尺。
:插⼊换⾏符。
:插⼊段落。
:插⼊或修改超级链接。
:删除超级链接或标签。
:图形热点链接。
:标签管理。
:表格菜单。
:
插⼊表格...。
:表格属性...。
:单元格属性...。
:拆分单元格...。
:表格⾏属性...。
:插⼊⾏(在上⽅)。
:插⼊⾏(在下⽅)。
:合并⾏(向下⽅)。
:拆分⾏。
插⼊列(在左侧)。
:插⼊列(在右侧)。
:
合并列(向右侧)。
:拆分列。
:在指定位置插⼊或修改栏⽬框。
:在指定位置插⼊或修改⽹页帧。
:在指定位置插⼊或修改图⽚。
:在指定位置插⼊Flash动画。
:在指定位置插⼊⾃动播放的媒体⽂件。
:在指定位置插⼊其它⽂件。
:远程⾃动⽂件获取。
:在指定位置插⼊EXCEL表格。
:在指定位置插⼊特殊字符。
:
指定位置的背景图⽚管理。
:在指定位置插⼊表情图标。
:在指定位置插⼊当前⽇期。
:在指定位置插⼊当前时间。
:转换指定内容为代码样式。
:转换指定内容为引⽤样式。
:显⽰或隐藏指导⽅针。
:查替换功能。
:新建⽂档功能。
:相对或绝对位置设置功能。
:上移⼀层。
:
下移⼀层。
:缩放菜单。
:增⾼编辑区。
:减⼩编辑区。
:转为代码状态。
:转为编辑状态。
:转为⽂本状态。
:转为预览状态。
:打印全页。
:保存内容到相关联的表单。
:打开全屏编辑。
:
关闭全屏编辑并返回。
:弹窗保存并返回。
:查看在线使⽤帮助。
:关于编辑器的版权信息。
:直接访问eWebEditor站点。
:⼯具菜单。
:⽂件视图菜单。
:编辑菜单。
:对象效果菜单。
:组件菜单。
编辑器菜单栏下拉选项功能使⽤说明如下:
段落格式:设置⽂字内容的段落格式,使内容更加条理及便于阅读。
特殊字体格式:设置⽂字内容的特殊格式,包括删除线、飞⾏⽂字、移动⽂字等。
选择字体:设置⽂字内容的字体格式,可⽤⾃定义字体功能设置列表中没出列出的字体格式。注:需浏览者操作系统安装有相应字体⽂件才可正常显⽰⾃定义的字体。
字号:设置⽂字内容的⼤⼩。共分7种尺⼨。
缩放:放⼤或缩⼩编辑区内的内容。
注意事项:
部分提供修改功能的按键或选项,只需选择原来插⼊的对象,再按同⼀按键或选项,即可进⾏修改。
部分提供设置功能的按键或选项,都可以通过再按⼀次按键或选项来取消前⼀次的设置。
编辑栏使⽤说明:
编辑器编辑栏主要放置供使⽤者编辑内容的编辑框,若内容超出框架宽度或长度的话,会⾃动出现滚动条。另外还可通过状态栏的状态转换可转换编辑框的不同编辑状态。
状态栏使⽤说明:
编辑器状态栏放置有编辑器状态转换栏,共有四种状态可供转换,详细如下:
编辑状态(默认),在此状态下所有编辑的内容皆为所见即所得的⽅式。
代码状态,在此状态下所有编辑的内容皆以HTML标记源代码⽅式显⽰或编辑。
⽂本状态,在此状态下所有编辑的内容皆以纯⽂本⽅式显⽰或编辑。
预览状态,在此状态下所有内容皆以不可编辑的页⾯输出⽅式显⽰,可利⽤此状态预览编辑内容输出后的效果。
使⽤技巧:
乾坤⼩挪移
如果在⽹络上看到哪篇⽂章或新闻甚⾄页⾯觉得不错的话,可以⽤⿏标将相应页⾯内容全部选择起来后,直接拖动或复制到编辑器的编辑框即可,⽽且原页⾯上的图⽚、⽂字、CSS样式、动态效果等都能原封不动地转移到编辑框,不⽤修改或添加任何代码。
巧⽤插⼊⾃动播放媒体功能
插⼊⾃动播放媒体功能可以⾃动识别各种媒体格式并⽤相应的播放器在页⾯⾃动播放,⽽且这个功能还能识别图像⽂件,压缩⽂件等。⼤家可以充分利⽤此功能编辑出更多⾊声俱全的内容。
灵活运⽤预览状态
编辑内容中带有动态效果、即时播放媒体、GIF动画等活动内容时,编辑状态中只能显⽰静态的图像或播放器界⾯,这时只需要将状态转换为预览状态就可以马上看到这些内容的动态实时效果,如果想继续编辑的话,只需再转换到编辑状态即可。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论