eWebEditor Manual
在线HTML编辑器 - HTML在线编辑好帮手
Version 4.6
目 录
1.4.1 [2007-03-01] eWebEditor Version 4.60 14
1.4.2 [2006-12-03] eWebEditor Version 4.40 14
1.4.3 [2006-09-20] eWebEditor Version 4.30 15
1.4.4 [2006-07-20] eWebEditor Version 4.00 15
1.4.5 [2005-11-01] eWebEditor Version 3.80 16
1.4.6 [2005-01-21] eWebEditor Version 3.60 17
1.4.7 [2004-09-01] eWebEditor Version 3.00 17
1.4.8 [2004-07-06] eWebEditor Version 2.80 18
1.4.9 [2004-05-20] eWebEditor Version 2.75 18
1.4.10 [2004-04-18] eWebEditor Version 2.16 20
1.4.11 [2004-04-01] eWebEditor Version 2.00 20
1.4.12 [2004-02-04] eWebEditor Version 2.00 beta1 21
1.4.13 [2003-12-11] eWebEditor Version 1.13 23
1.4.14 [2003-12-01] eWebEditor Version 1.00 23
1.4.15 [2003-11-13] eWebEditor Version 1.00 beta2 24
1.4.16 [2003-11-01] eWebEditor Version 1.00 beta1 24
1 产品介绍
1.1 产品概述
eWebEditor是一个基于浏览器的在线HTML编辑器,WEB开发人员可以用她把传统的多行文本输入框<textarea>替换为可视化的富文本输入框。
eWebEditor不需要在客户端安装任何的组件或控件,操作人员就可以以直觉、易用的界面创建和发布网页内容。
您可以通过eWebEditor自带的可视配置工具,对eWebEditor进行完全的配置。
eWebEditor是非常容易与您现有的系统集成,简单到您只需要一行代码就可以完成eWebEditor的调用。
eWebEditor是全源码提供的,不仅包含客户端的源代码,也包含服务器端的ASP、PHP、JSP或.NET源代码。
您可以把eWebEditor应用于各种基于网页的应用系统中,如内容管理系统、邮件系统、论坛系统、新闻发布系统,等与内容发布相关的所有应用系统。
感谢您选择eWebEditor,希望我们的产品能给您带来一个完美的在线编辑解决方案。
更多相关链接:
l 首页
http://www.ewebeditor.net/
l 在线演示
http://www.ewebeditor.net/demo.asp
l 下载试用
http://www.ewebeditor.net/download.asp
l 在线购买
http://www.ewebeditor.net/buynow.asp
1.2 产品效益
使用eWebEditor能为您的企业,您的开发者,操作eWebEditor的最终用户,带来许多的好处。纵观我们的优势描述,我们相信eWebEditor将可以为您的应用系统提供最好最完善的在线编辑解决方案。
1.2.1 给企业带来的效益
l 人性化的许可
我们提供了三种简单的最易操作、最易接受的软件授权许可。每种许可,我们都允许您为了界面的需要,可以去除我们在软件上的版权标识。这样除了您,您的客户不会被强制告知此软件是我们开发的。这样更有利于与eWebEditor集成的产品在商业上的运作。
l 无需最终用户培训
eWebEditor的最终用户操作界面是非常简单的,与现在流行的桌面文字处理软件Microsoft Word是非常相似的。只需几个简单的按钮点击,就可完成强大效果的文字编辑。您的客户只要会用Microsoft Word,就会用eWebEditor。
l 节约您的时间和金钱
您只要花很低的费用就可以购买我们经过多年研发并测试的完善的在线编辑系统。而如果您想在自己的应用产品或网站中加入在线编辑功能,如果您自己开发的话,您投入的资金及时间是非常不划算的。您可以把这节省下的资金及时间,充分利用到您的应用系统中,更能体现您系统的商业价值。
l 全源代码提供
与同类产品发布最大的不同是,eWebEditor是全源代码提供的。包括客户端的JavaScript源代码和服务器端的ASP、ASP.NET、PHP或JSP源代码。您自己最大化的个性化使用eWebEditor,自由的在eWebEditor的基础上进行二次开发,以满足企业各种应用的需要。这也使得您的系统可以完全放心的与eWebEditor进行集成。而如果未提供源代码,则您可能需要一点点的改动都无法实现,大大的制约了您系统的应用效果。
l 国际化战略
使用UTF-8支持多语言编码的eWebEditor,在保证您企业本地化市场的应用同时,也可以加速您企业在国际产品市场的推进。只需拥有一套eWebEditor软件,就可以为您企业提供国际范围的在线编辑解决方案。
l 给您的客户带来效益
您只需付一些费用就可以给您的产品或应用增加一个强大的在线编辑功能,使您的用户可以在线可视化的编辑内容,同时也为您的产品增加了一个亮点。
l 无限集成
eWebEditor可以与任何的基于WEB的应用系统集成。只要有需要在线发布内容的地方就可以使用eWebEditor。如内容管理系统,论坛系统,邮件系统等。而这些意味着,只需要eWebEditor,就可以完全为您提供一个完美的、全套的在线编辑解决方案。
l 无限时支持
对于每个购买的用户,我们都提供无限时的技术支持服务。只要您在使用上有什么问题,随时可与我们联系,保证您可以最好的使用我们的产品。即使您的企业开发人员变动,您也不必担心新手不会使用所带来的问题。
1.2.2 给开发者带来的效益
l 易用
eWebEditor是非常容易使用的,只需要一行代码就可以完成eWebEditor的调用。快速到在5分钟内,就可以完成与您现有内容管理系统的集成。
l 可视化定制
eWebEditor工具栏上的按钮有多少,是否显示状态栏,上传文件的大小,上传文件的路径,界面效果等等都是可以定制的。
最主要的是与其它同类产品不同的是,所有这些设置都是可视的。我们提供了一个强大的后台管理系统,可以对eWebEditor的各种配置进行管理,开发人员无需修改任何代码,即可完成对eWebEditor的定制。
为了实现定制,其它编辑器您可能需要几天到几周才能有所了解它的代码参数,并进行一些简单的定制。定制完后,过几天您可能又忘记了。而下次定制修改时,您又得花很长的时间来回顾。而使用eWebEditor的可视定制,绝对大大的简化了开发人员的工作。
l 完善的接口(API)
eWebEditor作为一个强大的在线编辑模块,提供了完善的接口,满足更高级用户的需要,您可以通过接口实时控制或者获取编辑器的内容或者状态。
l 代码规范
eWebEditor是一个软件产品,在程序编码中,我们始终强调其编码的规范性。我们不仅仅需要的是一个产品应用,我们更需要的是一个编程规范。我们在产品的不断完善同时,完善我们的编码规范。如适当的注释,很好的组织结构,使其也成为编程人员的学习参考资料。这样也更有利于产品的二次开发。
l 完整的文档
我们提供了一个详尽生动的使用说明文档。包括最终用户操作手册、开发手册、FAQ和一些使用例子。帮助您快速的了解我们的产品的各项目详细功能并应用到自己的系统中。如果文档还不能解决您的问题,您可以随时与我们联系取得技术支持。
1.2.3 给最终用户带来的效益
l 绿色软件
eWebEditor是纯JavaScript和HTML的,不需要在客户端安装任何的浏览器插件、ActiveX控件或Java Applets.
l 所见即所得(WYSIWYG)
即通过编辑器编辑的文字、图片等HTML标记输出到页面的效果和编辑时显示的效果一致,让使用者方便地对编辑的内容进行修改、排版等。
l 简单易用
您不需要具有任何的标记语言或编辑语言知识,就可以用eWebEditor发布HTML格式的网页内容。编辑器的编辑及使用方法与Microsoft Word等著名的常用文字处理软件类似。在编辑器的界面中所有您需要做的只是用鼠标指向并点击的操作。即使没有主页制作经验的使用者也能快速上手。
l 方便快捷
使用所见即所得的编辑器能快捷、方便地编辑出效果一流的图文效果,如果使用纯手工编写代码的方法编辑则需要浪费大量时间及精力。
l 快速完成任务
用所见即所得的可视化的编辑器,您可以更快得多的完成一项指定的任务,比用一个非可视化的编辑器。例如:表格可以用可视化的对话框进行设定即可完成创建,而这比手动的输入表格的每个HTML标志是快得多的。
l 不容易出错
如果您没有使用一个可视化的编辑器,您可以就会输入很多标志不完整,或没有结束标记的HTML内容,而这些在发布时都无法查看到,等发布后才能发现自己的格式不正确,这时你不得不又要重新修改此内容直至正确。用了eWebEditor,所有这些你都可以在线的看到,就不会出现发布标记不完整的内容了。
1.3 产品特性
eWebEditor是一个所见即所得的在线编辑器。顾名思义,就是能在网络上使用所见即所得的编辑方式进行编辑图文并茂的文章、新闻、讨论贴、通告、记事等多种文字处理应用。
1.3.1 最终用户相关特性
l 绿色软件
100% DHTML,JavaScript ,ASP/ASP.NET/PHP/JSP源代码。您不再用担心慢的Java或Activex组件插件带来的不便,所有的处理都基于已经安装的浏览器。
l 相对或绝对路径
对于在线编辑器来说,路径问题一直是一个难点,基本上市面上的在线编辑器所编辑出来的内容链接都用的是带域名的绝对全路径(如:http://www.xxx.com/xxx/xxx.gif)。eWebEditor充分解决了此问题,只要在后台简单设置一下,就可以实现三种路径模式(相对路径、绝对根路径、绝对全路径),完全摆脱了站点或系统或目录迁移而带来的路径问题。
l 图形热点链接
eWebEditor的此应用绝对是所有在线编辑器软件中的始创,能够在线编辑实现图形的热点链接功能,即一个图片可以按区块链接到多个地址。
l 内附文件上传功能
eWebEditor内涉及的文件相关的功能中,如图片来源,媒体文件来源,附件来源等,都自带有从客户端直接上传到服务器端的功能。
l 自动获取远程文件
利用远程文件自动获取功能,可以把别人服务器上的图片等文件自动传到自己的服务器,不要当心别人的站点关了,本地链接的文件不存在的问题,也不要再一个个下载下来再传上去了,全过程完全自动。
l 艺术字
利用eWebEditor此功能可以在网页上插入类似word艺术字效果的文字,超好的视觉效果。并具有修改,设置字体名、大小、颜色、效果等功能。
l 智能粘贴
eWebEditor具有三种粘贴方式,常规方式粘贴,纯文本方式粘贴,或者以Word方式粘贴,如果剪贴板中的内容是Word形式的,将有提示是否去除Word格式,因为Word粘进来文档可是非常非常的大,冗余的代码实在的多。
l 大小自适应
eWebEditor可以按你调用的宽度和高度自适应编辑器的大小,特别是高度,这是很多编辑器所不具有的,大大方便了调用,使页面能够达到更好的效果。
l 多种编辑模式
eWebEditor具有4种编辑模式,有:HTML代码模式、可视设计模式、纯文本模式、预览模式,可以满足所有应用的需要。
l 状态保持
现在很多的在线编辑器,在提交后,如果服务器端较验没成功,点击“退回”时,原来编辑器中编辑的内容就会丢失,而eWebEditor会保持编辑后的状态,并且能够与Reset按钮同步Reset。
l 超过100个的功能按钮
eWebEditor基本上包含了编辑器所应具有的所有的功能按钮。如复制、剪切、粘贴、表格、图片、文件、字体、颜色等,并还在不断的补充中。
l 无强制的错误弹出
如果最终用户的浏览器没有达到IE5.5或以上版本,程序不会出错,最终用户虽然不能使用高级的编辑功能,但仍然可以使用纯文本方式编辑。
l 图形化用户界面
简单易用,所需操作的只的鼠标的指向和点击。没有编程技术的要求,没有专业电脑网络技术的要求。
l 强大表格处理功能
可以创建、修改表格、单元格、表格行等,设置它们的边框大小、颜色、对齐、单元间距等等。你创建一个表格后,你可以通过简单的右键点击表格或单元格,在弹出菜单中选择想编辑的元素,然后在弹出对话框中改变它的各项属性。有关表格的功能按钮有:插入表格、修改表格、单元格属性、拆分单元格、表格行属性、插入行(在上方)、插入行(在下方)、合并行(向下方)、拆分行、删除行、插入列(在左侧)、插入列(在右侧)、合并列(向右侧)、拆分列、删除列。
l 右键菜单
右键菜单功能使得eWebEditor更象是基于Windows的HTML编辑器,使用Windows操作系统的用户可以更易的掌握操作。在编辑区中点右键,通过右键菜单,你可以剪切、拷贝、粘贴、修改表格、超链接、图片等元素的各项属性。
l 按钮菜单
为了在界面上的简洁,我们把工具栏上的所有按钮按功能规结为了几个菜单按钮。您完全可以只需要一行工具栏就代替实现我们的全功能编辑按钮。就如我们自带的Mini样式。
l 段落属性
eWebEditor支持段落属性的编辑,包括边距(margin)、对齐(alignment)、行距(lineheight)、缩进(text indent)、单词间距(word spacing)。
l 相对位置和层
在eWebEditor编辑中,可以设置对象为相关位置模式,并可对层的次序进行调整。以制作出对象层叠效果的内容。
l 超链接和锚
很强的超链接和锚管理功能。可以创建和修改超链接的各种属性。特别的是可以在页面中制作和管理锚,实现本页链接。此功能在同类其它的编辑器中基本没有。
l 对话框自动调整
由于语言字数及客户浏览器可能不同,而导致弹出对话框的大小没法固定,如果固定了则有可能在有些用户看到的是界面太小,文字超出了边界,而有些用户看到的是界面太大,不够饱满。eWebEditor有自动调整对话框大小的功能,即使语言包文件发生变化或客户端使用WinXP/Win2000,也能最好的保证对话框界面的完整饱满。
l 全屏编辑
在编辑大文本时,经常感觉编辑的区域太小,不是很方便。eWebEditor可以打开一个全屏的编辑窗口,编辑后再保存返回,更加的人性化。
1.3.2 开发者相关特性
l 多样式支持
在您网站的多个应用系统中,您只需要使用一个eWebEditor。您可以定制多个样式,在不同的地方使用不同的样式。这里指的样式是指,包含了一系列实例参数及界面的配置。
l 功能界面可自定义
eWebEditor的工具栏、按钮、界面、各种应用参数允许自定义。您可以根据自己实际需要定制,如:工具栏按钮的个数,是否显示状态栏,上传文件的路径模式、保存路径、允许的扩展名、大小等,是否创建缩略图,是否打图片水印等。
l 超强可视设置
正如上面所说的样式配置,我们提供一个强大的后台管理配置程序。可以通过可视化的界面轻易实用编辑器工具栏的定制及各种参数属性的设置。这个功能是市面上所有同类产品所没有的,eWebEditor是市面上唯一的具有可视化设置的在线编辑器。
l 超易集成
把eWebEditor集成到您已有的基于浏览器系统中是非常容易的。简单到只要一行代码即可完成eWebEditor的调用。
l 超易安装
只要拷贝eWebEditor整个目录中的所有文件到你的WEB服务器上即可。不需要几分钟程序即可运行了。
l 国际化多语言支持
eWebEditor以语言包的形式进行语言封装,能够跟据客户端的操作系统语言自动选择适合的语言界面。能够自动调整界面大小,解决由于语言字符长度不同引起的界面大小不同的问题。能够设置每种语言默认的字体名称及字体大小,最佳化对话框显示效果。eWebEditor真正做到了语言包的完全个性定制。
同时UTF-8编码的采用,使得eWebEditor即可以与您使用UTF-8编码的国际化产品集成,也可以与您非UTF-8编码的本地化产品集成。
l 支持多个实例
您可以在一个表单(form)中放置任意多个eWebEditor。每个实例的样式配置可以是不同的。
l 支持多个界面效果
eWebEditor自带有2套按钮图片和9个样式效果,你可以设置出18种界面效果。当然,你也可以自己制作更多的效果。
l 完善的接口
eWebEditor作为一个强大的在线编辑模块,提供了完善的接口,满足更高级用户的需要,您可以通过接口实时控制或者获取编辑器的内容或者状态。
l 优化的结构
eWebEditor采用先进的前后台分离结构,前台纯为html格式的静态网页形式,加上服务器端的高级功能接口,大大提高了效率,且又具有强大的自定义功能。同时也使得eWebEditor能最佳的融入您的产品。
l 弹窗调用模式
您可以使用eWebEditor的弹窗调用模式来编辑普通输入框<textarea>中的HTML内容,编辑完后,HTML代码会自动返回到<textarea>输入框中。这样便更有利于界面上的布局及整个页面调入的速度。
l 超强文件上传设定
在eWebEditor自带的配置后台管理中,您可以对上传的各种参数进行设定。包括:上传文件的类型,上传的路径,是否自动建目录,上传组件的选择,允许上传的文件大小,是否使用水印,是否使用缩略图等等。
l 缩略图及水印功能
在我们的后台中,您可以设置是否开启图片缩略图及水印的功能。及当满足某些条件时使用,不满足条件时不使用。水印分为文字水印及图片水印可选。当使用文字水印时,可以设置字体、字体大小、字体颜色、阴影等。
l 大文本支持
在ASP环境中,一般的输入框有102399字节的限制(100K左右),超过此限制的大文本内容不能提交并获取,而eWebEditor理论上支持无限大文本。
l 支持WEBEQ公式编辑接口
eWebEditor自带了WEBEQ在线公式编辑的接口,当前支持的是WEBEQ 3.0版本。如果您已经有此软件使用许可,您可以按照我们使用说明文档中的方法,在eWebEditor中集成使用。注:WEBEQ需要客户端有JAVA虚拟机的支持。
1.4 最新更新
1.4.1 [2007-03-01] eWebEditor Version 4.60
l 增加多个水印相关设置项,允许同时在一个图片上使用文字水印和图片水印,可以对水印位置、边距、透明度等进行设置。
l 增加自定上传路径接口功能,后台可设此功能开关,轻松实现把不同用户的上传文件分别存在不同目录中。同时服务器端文件浏览也与此关联,用户只能浏览自己的文件夹。
l 解决模式窗口调用编辑器时上传文件接口无效的问题。
l 修正IFRAME框架内调用时的初始错误。
l ASP.NET版,修正后台环境检测的错误。
l 增加本地文件上传类型及大小设置项。
l 优化用户友好,当后台设置为不允许上传文件时,前台相关界面将不显示上传的操作项。
l 修正本地文件自动上传时,带空格的目录地址拷贝问题。
l 修正受样式影响导致的部分文字字体效果不能修改的问题。
l 增强优化编辑区按语言的样式自定义控制。
l JSP版,修复WebSphere环境下的中文文件名上传乱码问题。
1.4.2 [2006-12-03] eWebEditor Version 4.40
l JSP版,修复非Window系统后台管理中写文件路径的问题。
l PHP版,修复Apache服务下的后台管理中文问题及部分样式问题。
l JSP,PHP版,优化写文件格式。
l 语言包样式文件格式优化。
l 修正部分图片链接的错误。
l JSP版,远程自动上传时,不会把文件写到自动生成的目录中。
l .NET版,修正在模板和用户控件中使用的问题。
l 修正相对路径模式时,从其它网站拷贝内容,部分图片不能显示的问题。
l 增强颜色对话框,加入常用颜色的快速选择。
l 增强段落属性对话框,加入常用行距选择下拉。
l 插入图片对话框,使用相对路径在某些情况下的错误。
l 增加导入EXCEL时选项,自动滚动选项使得大表格在页面上显示不会看不到或撑开,表格边框选项使无边框的工作表有边线。
l 增加上传图片浏览时的自动预览。
l 增加客户端API,获取编辑器内容字数getCount(),获取编辑内容纯文本getText()。
1.4.3 [2006-09-20] eWebEditor Version 4.30
l 增加excel导入功能,可以导入指定的工作表,支持Excel中的图片等文件自动上传到服务器。
l 撤消和恢复功能全新实现,支持光标定位及模式切换定位,完整的撤消恢复模式,包括:单步对话操作的恢复、对象拖动调整大小恢复,等。
l 修正艺术字的字体设置无效,及某些情况插入后不显示的问题。
l 优化对齐方式处理。针对段落的对齐,当对象为控件时,可以对控件进行对齐。可以实现快速图文混排。
l 增强外部样式文件引用功能,可以使用绝对路径形式。
l 修正ASP版,无组件上传文件类对特殊符号处理的错误。
l 修正系统自带图片路径不对的问题。
l 修正Word导入中,Word2003文档中图片不能自动上传的问题。
l 修正远程自动上传时的接口返回多一个空文件的问题。
l 修正全屏编辑状态下状态栏中的窗体放大缩小功能操作后使窗口无法还原的问题。
l 优化客户端软件的的自动上传处理及错误捕获。
l 部分代码优化,提高编辑速度。修复所有已知BUG。
1.4.4 [2006-07-20] eWebEditor Version 4.00
l 超过100页超详细的新版用户手册整理完毕。
l 字体名称、字体大小增强为样式控制,可以定义任意大小的字体,不再局限于只有从1号至7号字,包括Word文档中拷贝过来的文字也可以直接修改字体效果。
l 增加Word文档导入功能按钮,导入文档内容的同时,可以把Word文档中的图片、图表上传到服务器。导入时,有是否保留VML格式的模式选项,当使用VML格式时,图表不生成图片,使用VML格式显示;当不使用VML格式时,Word文档中的图表会生成图片并上传到服务器。
l 增加本地文件自动上传功能按钮,一般用于Word文档拷贝的同时把Word文档中的图片自动上传到服务器,同时可以选择插入剪贴板中没有的VML样式及默认的Word样式。
l 增加Word粘贴时自动本地文件上传功能,在粘贴时有对话框提示,可以按选定的项目处理粘贴的内容,解决Word文档拷贝后的图片不能上传及样式不一致的问题。
l 增加表格对话框边框效果选项,文字对齐选项。此功能可以简单方便作出单线表格效果。同时修改插入表格的默认效果,以单线显示表格。
l 修复一个或多个图片拖动时,图片路径自动转为全路径模式的问题。
l 修复缩略图到大图的链接,没有按后台设置,使用相应形式的路径格式问题。
l 修复相对路径模式时,上传图片及浏览服务器端文件的路径错误问题。
l 优化ASP/ASP.NET版,使用AspJpeg组件时,默认支持透明水印。
l 修复ASP版,特殊文件名上传的JS错误。
l 修复PHP版,Linux系统,无法生成缩略图。
l 优化PHP版,输出标签统一,支持新版本的默认环境设置。
l 修复JSP版,使用自动建目录时,水印及缩略图失效的问题。
l 修复JSP版,缩略图固定会生成,后台开关无效的问题。
l 修复JSP版,远程文件获取时遇大写路径及文件名只保存不替换的问题。
l 修复ASP.NET版,远程文件获取时,大小写文件名不获取问题。
l 优化ASP.NET版,使执行程序快速完成并退出。
l 修复所有已知BUG。
1.4.5 [2005-11-01] eWebEditor Version 3.80
l 增加服务器端图片、Flash等文件插入功能,图片预览功能,及后台可设置此功能的开关。[预览]
l 增加多个示例调用代码。
l 修复当编辑器被初始为不显示时,工具栏上的按钮有可能被压缩堆在一起的问题。
l 修复JSP版后台程序属性值有空格的匹配错误
l 修复英文界面的"热点图片"对话框中,"确定","取消"按钮看不见的问题。
l 修复ASP版无组件上传方法,部分中文名无法上传及文件大于设置值时无响应的问题。
l 修复ASP版图片水印可能不能使用的问题。
l 修复段落属性对话框中单字间距使用了没有效果的问题。
l 修复繁体语言包编码错误的问题。
l 修复从WORD中拷贝部分样式丢失的问题。
l 修复JSP版在Linux系统下文件路径错误的问题。
l 修复在代码模式粘贴时,单引号被转全角的问题。
l 修复PHP+Apache下的文件上传问题。
l 修复所有已知BUG。
1.4.6 [2005-01-21] eWebEditor Version 3.60
l 增加插入和修改艺术字的功能,利用此功能可以在网页上做出特殊效果的文字。
l 增加段落属性功能,包括右键功能,可以对一个或多个段落使用样式功能,段前段后行距等可设置,不再会由于段落间距太大影响效果。
l 增加缩略图、文字水印、图片水印功能。并可设置缩略图大小、生成条件,水印文字内容、颜色、字体、阴影等。
l 加入外部样式表引用接口,可以使用与站点相同的样式表文件来控制编辑区的效果,使得编辑内容与显示内容完全效果相同。
l 所有对话框增加自适应功能,对话框的大小可以根据客户端操作系统自动调整对话框的大小,以适应语言、平台环境的变化。不再会出现WINXP sp2下按钮显示不全,而WIN2000或WIN98系统下又有一点大的问题。
l 增加XP蓝色按钮图片一套,系统默认带二套按钮图片。
l 图片插入或修改对话框,加入图片预览功能,具有缩放,显示原大小的功能。
l 修复ASP,ASP.NET版中对旧版本sa-fileup上传组件的支持。
l 修复各版中当编辑区未获得焦点时在当前位置插入功能的脚本错误问题。
l 修复PHP版上传文件类型错误,在LINUX系统下对话框错误,上传文件路径错误的问题。
l 修复部分图片可能无法显示的问题。
l 修改部分默认设置,最优提出最常用的功能按钮。
l 修复ASP版图片水印可能不能使用的问题
l 修复段落属性对话框中单字间距使用了没有效果的问题
l 修复从WORD中拷贝部分样式丢失的问题
l 修复JSP版在Linux系统下文件路径错误的问题
l 修复在代码模式粘贴时,单引号被转全角的问题
l 修复所有已知BUG。
1.4.7 [2004-09-01] eWebEditor Version 3.00
l 纯静态+接口处理方式,全面优化程序整体结构,前台全用html格式的静态网页,大大提高效率。
l 以文本文件数据保存模式取替数据库保存数据模式,不要再去关心系统环境所支持的数据类型,更方便平台的移值。当加入产品时,更省去了一个系统要带两个数据库的问题。
l 前后台完全分离,即若想把eWebEditor加入您产品进行发布时,可以完全简单的去除后台管理程序,而不影响前台的操作。
l 全新的处理机制及上传接口,彻底解决使用远程自动上传时,表单重复提交的问题。
l 修复所有已知BUG.
1.4.8 [2004-07-06] eWebEditor Version 2.80
l 修复使用相对路径时,从其它站copy图片后粘贴,地址失效的问题
l 修复一个表单中有多个编辑区时,会多次提交的问题
l 修复非菜单按钮的撤消和恢复功能不能使用的问题
l 修复对象上移或下移一层有脚本错误信息的问题
l 修复删除对象时有脚本错误信息的问题
1.4.9 [2004-05-20] eWebEditor Version 2.75
l 加入锚标签的管理对话页,具有对标签进行增加、删除、修改的功能,同时超级链接对话框中加入锚标签选项,实现同页跳转
l 使用Application代替每次运行中的读数据库及转换处理操作,大大提高效率,使得页面的调入基本相当于静态网页。
l 彻底解决路径问题,后台增加路径模式设置,对文件路径允许设置使用“相对路径”、“绝对根路径”、“绝对全路径”
l 完全整合远程文件自动上传功能:去掉原来提供的接口ReplaceRemoteUrl.asp文件,完全整入编辑功能中,真正实现自动上传,后台加入允许上传远程文件的类型、大小,及是否使用自动上传功能。并加入手动文件上传按钮功能,只要加入此按钮,在编辑页即可看到上传的文件。并与原来的上传文件一样,也提供远程上传文件的接口。
l 加入常用快捷键功能,现有快捷键汇总如下:
n 在任何状态模式下有效的快捷键:
F1:显示帮助信息
F2:显示或隐藏指导方针
Ctrl+1:切换到代码编辑模式
Ctrl+2:切换到可视设计编辑模式
Ctrl+3:切换到纯文本编辑模式
Ctrl+4:切换到预览模式
Ctrl++:增大编辑区
Ctrl+-:减小编辑区
Ctrl+Enter:提交
n 在三种编辑模式有效的快捷键:
Ctrl+A:全选
Ctrl+C:复制
Ctrl+X:剪切
Ctrl+V:粘贴
Ctrl+Z:撤消
Ctrl+Y:恢复
Ctrl+F:查找
n 在可视设计编辑模式有效的快捷键:
Ctrl+B:粗体
Ctrl+I:斜体
Ctrl+U:下划线
Ctrl+D:从Word粘贴
Ctrl+R:查找与替换
Shift+Enter:软回车,相当于插入<br>
l 增加上传组件可选,当前加入ASPUpload、SA-FileUp、LyfUpload组件支持
l 增加上传文件具有自动建立目录的功能,上传文件是否按日期建目录保存在后台可选,如果使用需要FSO支持,年目录、年月目录、年月日目录可选
l 增加一个以ACCESS为数据库的简单新闻系统的代码实例,代码中有详细注释,基本涉及eWebEditor的所有功能调用
l 增加弹窗调用接口,调用popup.asp,可以在弹出的窗口中编辑后,再返回值到原来的编辑框中,可带参数,并相应增加弹窗保存返回的功能按钮
l 增加弹窗保存返回功能按钮,可与弹窗调用配合使用
l 增加站点访问按钮功能,更方便的访问在线说明使用方档
l 增加默认调入时是否显示指导方针的设置,默认为不显示
l 增加更多的文件类型图片
l 修复带中划线的域名,不能自动远程图片上传的问题
l 修复使用自设相对路径时插入文件路径带端口号的问题
l 修复有可能存在的一些安全上的问题
l 修复自动远程上传函数中,相同图片可能多次上传的问题
l 修复表格插入背景图时没有传入接口的问题
l 修复表格和图片的宽度或高度拖动调整后不能再修改的问题
l 修复由于IE自带的DHTML接口方法的问题,导致的在菜单中撤消和恢复不能使用的问题
l 取消载入时编辑区会自动获得焦点
l 上传文件接口变更:v2.16版中的SourceFileName改为OriginalFileName,同时加入带路径的保存文件名SavePathFileName
l 系统自带样式名变更,为统一规范命名,系统样式全改为以s_开头的名称,除默认的standard外
l 在线帮助文件更新,在线演示更新,在线说明文档更新
1.4.10 [2004-04-18] eWebEditor Version 2.16
l 推出小巧实用的mini风格。增加多个菜单按钮:字体菜单、段落菜单、文件视图菜单、组件菜单、工具菜单、编辑菜单、对象效果菜单。所有功能按钮都按菜单进行分类。增加mini系统自带样式,带全部功能,采用全菜单按钮,工具栏占位小,标准界面宽度。系统自带样式达10个。
l 修复后台样式设为“不使用相对路径”时,设置无效的问题
l 修复当在代码模式中首行输入样式或注释时,转到设计模式时此代码丢失的问题
l 修复当不显示工具栏时,不能编辑的问题
l 修复插入图片时,如果设定有边框颜色,不起作用的问题
l 修复超链接对话框,当在插入时,target属性不起作用的问题
l 修复后台管理中的上传文件管理中分页未传id的错误
1.4.11 [2004-04-01] eWebEditor Version 2.00
l 增加纯文件输入功能,并加入客户端IE版本自动检测机制,如版本不足,不会出错,只能使用纯文本输入
l 增加图形热点链接功能按钮,可以对一个图形分隔链接(在线编辑首创)
l 增加取上传文件接口,可以在客户端或服务器端取得上传的文件原文件名和实际保存的文件名列表,可用于存入数据库或图片新闻等中
l 增加超级链接的目标选择,修改原IE自带的链接窗口,并提供公用调用
l 增加在代码模式或纯文本模式允许粘贴功能,并自动减少行距,以与标准样式匹配
l 增加一个酷蓝样式(很漂亮的),样式自带样式达9个
l 修复上传文件大于限定值时的一个JS错误
l 修复自动远程获取图片的一个小错误,ReplaceRemoteurl.asp文件
l 修复在编辑状态下显示指导方针后,再切换到代码或者预览状态后,再切换到编辑状态中,那么指导方针就会消失的bug
l 修复显示为空时,有可能还有<p></p>标志的错误
l 修复后台管理中使用相对路径设置时出现不能使用特殊字符的错误提示
l 上传图片后产生冗余代码的清除
l 修复decode.asp文件中的错误,使得无法过滤的问题
l 修复后台路径设置中的一些问题,允许使用“/”或“/”或“..”这样的格式
l 修复使用相对路径时,未考虑端口号的问题
l 完善后台上传文件管理功能,可管理多个样式目录下的文件
l 修复有可能乱码的问题
l 后台上传文件管理中加入目录是否存在的检测,防止页面出错
l 后台管理加入初始纯文本模式设置
l 修复预览状态下全屏返回,样式丢失的问题
l 修复超链接在编辑模式和代码模式间转换时,链接路径变更的问题
l 修复插入图片时漏掉border属性的问题
l 使用说明文档更新,增加多个实际操作使用例子
1.4.12 [2004-02-04] eWebEditor Version 2.00 beta1
l 增加显示或隐藏指导方针,也就是在表单,链接,表格边框为0时,有一个虚线
l 样式CSS内容的管理从后台中取消,改为.css文件,放在CSS目录,提高缓存下载速度,及保证样式定义的完整
l 增加查找替换功能按钮,实现内容的查找及替换
l 增加直接新建文档功能按钮,即全部清除内容
l 增加相对或绝对位置设置功能按钮,具有2D功能。使得图片等对象,可以浮于文字上方,重叠等
l 增加上移一层功能按钮
l 增加下移一层功能按钮
l 增加增大编辑区功能按钮
l 增加减小编辑区功能按钮
l 增加缩放功能按钮,下拉型或按钮菜单型
l 后台管理加入是否使用相对路径功能,允许使用相对路径
l 后台管理加入CSS目录名设置
l 后台管理加入允许设置调入时的初始模式
l 后台管理加入允许设置文件上传的目录路径
l 增加菜单功能,使得功能按钮更加集中及易用
n 右链菜单功能
n 粘贴按钮菜单功能
n 表单菜单功能
n 表格菜单功能
l 增加强大的表格处理功能,包括
n 插入表格...
n 表格属性...
n 单元格属性...
n 拆分单元格...
n 表格行属性...
n 插入行(在上方)
n 插入行(在下方)
n 合并行(向下方)
n 拆分行
n 删除行
n 插入列(在左侧)
n 插入列(在右侧)
n 合并列(向右侧)
n 拆分列
n 删除列
l 修改状态栏样式,更美观
l 为了更加的规范,图片及部分文件名调整
l 原来的功能按钮一些属性的扩充,如原有表格对话框加入背景图片,...等
l 背景图对话框可以做为公用模块进行调用
l 增加扩充功能,有关图片远程自动获取及上传,在需要使用此功能的接收页面里首先包含ReplaceRemoteUrl.asp,然后执行处理函数就可
l 说明文档帮助文件相应修改
l 增加6套样式配色,当前共8套自带样式
l 按钮图片,全部统一为20px*20px大小
l 预览再回来时,右键菜单错误
l 修复为空提交时,检测出还有<p> </p>的问题
l 修复不使用状态栏时,直接引用状态栏上元素的错误
l 修复插入表格时漏掉</tr>的错误
l 其它一些小问题修复...
1.4.13 [2003-12-11] eWebEditor Version 1.13
l 修复“插入自动播放的媒体文件”不能播放出错的问题
l 修复“预览状态”下“提交”或者“重置”所有格式丢失的问题
l 增加HTML安全字符转换函数(include/deCode.asp),并在后台增加取得deCode函数代码调用的功能
l 优化星期生成函数
l 加入更多的注释便于阅读
1.4.14 [2003-12-01] eWebEditor Version 1.00
l 重点变更:对话框全部由动态改为静态网页,减轻服务器端负担,取消了原来的参数传递方式,转为对象引用。
l 修复“纯文本粘贴”和“从Word粘贴”功能中焦点丢失的问题。
l 修复修改图片属性时,提交错误的问题。
l 修复在xp系统中弹出对话框变形的问题。
l 修复“插入Flash动画”时不能从url提交的问题。
l 进一步规范主文件编码结构,同时减小主文件大小,加快调入速度。
l 说明文档加入“应用场合”说明。
l 字体背景色和单元格式,表格式背景色的设置分离。
l 为了使在各操作系统中看到的标准样式是一致的,把标准样式中的与用户自定义有关的颜色,改为绝对颜色。
l 增加“段落样式”下拉工具按钮,可以对段落的样式进行设置。
l 增加“对象背景色”功能按钮,可以对表格单格,表格行,表格,网页的背景色进行设置。
l 增加“设置字体变大”功能按钮。
l 增加“设置字体变小”功能按钮。
l 后台管理中加入隐藏“状态栏”设置。
l 后台管理中加入是否自动检测从Word中粘贴设置。
l 后台管理中的自带样式允许多个,可以对指定自带样式进行拷贝。
l 增加1个自带样式,适合较小的编辑区,宽度最佳500,拥有常用功能按钮。
l 为进一步规范,加入更多更适当的注释,并把改变编辑状态函数ChangeMode()高级调用改为setMode()。
1.4.15 [2003-11-13] eWebEditor Version 1.00 beta2
l 经过两周的内部测试,此版本各方面已经独立完整,现在正式发布外部测试版,为我们1.0正式版的推出做更足的准备。
l 增加从word粘贴,纯文本粘贴,智能粘贴检测,全屏编辑,返回全屏编辑功能。
l 正式加入高级功能:setHTML(html)、getHTML()、insertHTML(html)、appendHTML(html)、setMode(NewMode)。
l 部分代码优化处理、目录结构定架、图片文件名重定。
l 加入上传扩展名、文件大小按样式设置功能。
l 介绍说明文档完善。
l 拟好下一次更新将加入的一些主要功能。
l 外部测试版。
1.4.16 [2003-11-01] eWebEditor Version 1.00 beta1
l 经过一段时间的努力,eWebEditor终于出来了,我们将不断的更新升级,并使之成为最好的、基于网页的、开放源码的、无组件式的、代码规范的、绿色的、所见即所得的在线编辑器。
l 内部测试版。
1.5 系统要求
1.5.1 客户端要求
因为编辑器使用了JAVASCRIPT客户端语言,如果浏览器不支持JAVASCRIPT或关闭了这个功能的话,编辑器就不能正常工作了。另外,编辑器还需要使用者的浏览器版本是IE5.5以上,否则编辑器的可视HTML编辑功能将不能正常工作,但仍然可以使用纯文本方式进行编辑。
l 操作系统: Windows 95, 98, ME, XP, NT, 2000 or 2003
l 浏览器: Internet Explorer v5.5 或以上版本
l JavaScript支持
1.5.2 服务器端要求
eWebEditor 是基于WEB多种语言开发的一套网络在线编辑系统模块,正常使用该软件,跟据您选择的语言环境,只要能满足此语言的运行即可,无特殊要求。
l eWebEditor ASP 版
满足ASP运行环境,无特殊要求。
推荐:Windows 2000+IIS5.0+IE5.0环境(即win2000的默认安装)
l eWebEditor PHP版
满足PHP运行环境,无特殊要求,可在Window系列系统或其它非Window系统。
l eWebEditor JSP版
满足JSP运行环境,无特殊要求,可在Window系列系统或其它非Window系统。
l eWebEditor ASP.NET版
满足ASP.NET运行环境,无特殊要求。
推荐:Windows 2003+IIS6.0+IE6.0环境(即win2003的默认安装)
1.6 授权许可
eWebEditor是个商业软件,使用者:无论个人或组织、盈利与否、用途如何(包括以学习和研究为目的):查看、安装或使用 eWebEditor 的整体或部分,都必须支付商业授权费用,获得正式授权后,方可成为授权用户。
eWebEditor 共有三种授权许可,在购买前,请确定阅读并完全理解了您所选择的授权类型所具有的权利及受到的限制。
我们提供的授权许可是终身的,购买后,您不再需要按年或按月支付使用软件的授权费用。
1.6.1 网站授权许可
l 被授权方可以对授权产品进行必要的修改和美化,可以去除产品外在的版权标识,但不得去除源代码中的版权声明。
l 被授权方可以在自己的网站上使用授权产品,使用授权产品的网站域名或IP不受限制,前提是此网站必须是被授权方所有。
l 被授权方不可以把授权产品以任何形式进行重发布或销售。
1.6.2 发布授权许可
l 被授权方可以对授权产品进行必要的修改和美化,可以去除产品外在的版权标识,但不得去除源代码中的版权声明。
l 被授权方可以在自己的网站上使用授权产品,使用授权产品的网站域名或IP不受限制,前提是此网站必须是被授权方所有。
l 被授权方可以把授权产品作为一个模块加入自主开发的产品系统中进行销售,前提是所销售的产品系统中只能含有授权产品的前台部分程序,不能包括授权产品后台管理部分程序,并且此产品系统必须是商业付费软件,不能进行免费发布。且只能加入一个满足以上条件的自主开发的产品。
1.6.3 企业授权许可
l 被授权方可以对授权产品进行必要的修改和美化,可以去除产品外在的版权标识,但不得去除源代码中的版权声明。
l 被授权方可以在自己的网站上使用授权产品,使用授权产品的网站域名或IP不受限制,前提是此网站必须是被授权方所有。
l 被授权方可以把授权产品作为一个模块加入自主开发的产品系统中进行销售,前提是所销售的产品系统中只能含有授权产品的前台部分程序,不能包括授权产品后台管理部分程序,并且此产品系统必须是商业付费软件,不能进行免费发布。加入满足以上条件的自主开发的产品系统数量不受限制。
1.6.4 授权许可解释
l 为客户提供网页设计、网站制作服务属于加入一个产品重发布,需要购买“发布授权许可”或“企业授权许可”。
l 商业版软件不能免费发布,在免费发布的软件系统中只能加入免费试用版软件。
l 福州极限软件开发有限公司保留对该授权许可的解释权。
2 用户手册
2.1 界面概述
所见即所得的在线编辑器界面主要分为以下三大部分:
l 工具栏(Toolbar)
编辑器顶部为工具栏,主要放置各种编辑功能的选项及按钮图标,使用者只需点击图标或选择相关选项即可实时对编辑栏编辑的内容进行添加或修改、修饰。
l 编辑区(Editing Area)
编辑器中部空白处为编辑区,主要是供使用者输入及编辑内容所用,同时所编辑的内容全部都是所见即所得,但有部分内容,如活动的图像、文字、媒体等在编辑状态下只会呈现静止状态,需使用者转换到预览状态方可真实再现。
l 状态栏(Status Bar)
编辑器底部为状态栏,主要放置转换编辑器状态的按钮图标,状态共分为:代码状态、编辑状态(默认)、文本状态、预览状态。具体每种状态的作用请详见帮助中心目录的“状态栏使用说明”。
2.1.1 工具栏使用说明
eWebEditor工具栏集成了超过100个的功能按钮,详细可见[功能按钮汇总]。
很多按钮具有双重功能。如插入或修改图片按钮,在未选定图片时点按钮是插入功能,选定图片后再点此按钮则是修改功能。再如格式化粗体功能按钮,如果原选定的不是粗体,则点按钮后选定文字被格式化为粗体,如果原选定的已是粗体,则选定的文字会被取消粗体。
2.1.2 编辑区使用说明
编辑器编辑区主要放置供使用者编辑内容的编辑框,若内容超出框架宽度或长度的话,会自动出现滚动条。另外还可通过状态栏的状态转换,来控制编辑框的不同编辑状态。
2.1.3 状态栏使用说明
编辑器状态栏放置有编辑器状态转换按钮,共有四种状态可供转换,详细如下:
l 编辑状态(默认),在此状态下所有编辑的内容皆为所见即所得的方式。
l 代码状态,在此状态下所有编辑的内容皆以HTML标记源代码方式显示或编辑。
l 文本状态,在此状态下所有编辑的内容皆以纯文本方式显示或编辑。
l 预览状态,在此状态下所有内容皆以不可编辑的页面输出方式显示,可利用此状态预览编辑内容输出后的效果。
2.2 功能按钮汇总
eWebEditor自带有非常多的功能按钮可用于方便的编辑文档内容。功能按钮包括格式化文字、剪切和粘贴、表格管理、超链接和图片相关,等等。eWebEditor工具栏显示在编辑器的顶部,工具栏上的所有按钮都能够使用鼠标快速的点击访问。
eWebEditor工具栏带有超过100个的功能按钮。
注:如果下面列表中的某个按钮在编辑器界面中看不到或不能点击操作,可能是管理员已经在后台禁用了此功能。
下面列表按功能分组列表所有已有的功能按钮。
图标 | 标题 | 描述 |
| 编辑菜单 | 编辑相关功能按钮列表菜单 |
| 撤消 (Ctrl + Z) | 撤消上次的操作 |
| 恢复 (Ctrl + Y) | 恢复最后的操作 |
| 剪切 (Ctrl + X) | 拷贝当前的选区到剪贴板,然后删除它 |
| 拷贝 (Ctrl + C) | 拷贝当前的选区到剪贴板 |
| 粘贴 (Ctrl + V) | 把剪贴板中的内容插入到编辑器当前光标所在位置,或替换选区 |
| 纯文本粘贴 | 以纯文本(不带任何格式)的形式把内容粘贴到编辑器 |
| 从Word中粘贴 | 把从Word中拷贝的内容粘贴到编辑器中,并去除繁杂格式。 |
| 删除 | 删除当前选区 |
| 删除文字格式 | 删除当前选区内所有文字的格式 |
| 全部选中 | 选中编辑区内的所有内容 |
| 取消选择 | 取消当前选区 |
| 查找/替换 | 在编辑区查找/替换文字 |
| 字体菜单 | 字体相关的功能菜单 |
| 粗体 | 使当前选区内的文字在粗体和非粗体间变换 |
| 斜体 | 使当前选区内的文字在斜体和非斜体间变换 |
| 下划线 | 使当前选区内的文字在有下划线和无下划线间变换 |
| 中划线 | 使当前选区内的文字在有中划线和无中划线间变换 |
| 上标 | 使当前选区内的文字在上标格式和正常格式间变换 |
| 下标 | 使当前选区内的文字在下标格式和正常格式间变换 |
| 文字颜色 | 设定选定文字的字体颜色 |
| 文字背景色 | 设定选定文字的背景颜色 |
| 放大字体 | 增加选定文字的字体大小 |
| 缩小字体 | 减小选定文字的字体大小 |
| 段落菜单 | 段落相关的功能按钮菜单 |
| 左对齐 | 使当前选区所在格式块左对齐 |
| 居中对齐 | 使当前选区所在格式块居中对齐 |
| 右对齐 | 使当前选区所在格式块右对齐 |
| 两端对齐 | 使当前选区所在格式块两端对齐 |
| 编号 | 使当前选中的文字块按数字编号排列或取消编号格式 |
| 项目符号 | 使当前选中的文字块按项目符号排列或取消项目符号格式 |
| 增加缩进量 | 增加选定文字块的缩进量 |
| 减少缩进量 | 减小选定文字块的缩进量 |
| 断行 | 插入一个断行符<br> |
| 插入段落 | 插入一个段落 |
| 段落属性 | 设置选中段落的属性 |
| 组件菜单 | HTML组件相关的功能按钮菜单 |
| 插入或修改图片 | 在选定位置插入图片,或修改选定的图片属性。支持上传图片和创建缩略图、水印等。 |
| 插入Flash | 在指定位置插入Flash,并可设置其属性 |
| 插入自动播放的媒体文件 | 在指定位置插入各种媒体文件,并可设置其属性 |
| 插入其它文件 | 上传其它类型文件到服务器 |
| 远程文件自动上传 | 上传其它服务器上的文件到本地服务器,以防断链 |
| 本地文件自动上传 | 自动上传本机上的文件到服务器,常用于Word文档粘贴时,把Word文档中的本地图片、图表等文件自动上传到服务器 |
| Word文档导入 | 把Word文档内容导入到编辑器,同时上传Word文档内的图片、图表等文件到服务器 |
| 插入或修改栏目框 | 插入或修改栏目框 |
| 插入或修改网页帧 | 插入或修改网页帧 |
| 插入水平尺 | 插入水平尺<hr> |
| 插入或修改字幕 | 插入或修改字幕 |
| 插入或修改超级链接 | 点击后弹出对话框,用于设置超链接的设置。设置完后窗口关闭,给选定的文字加超链接 |
| 取消超级链接或标签 | 删除选定内容上的超级链接或标签 |
| 图形热点链接 | 创建或编辑图形上的热点链接 |
| 书签管理 | 对本编辑区内容中的锚标签进行管理 |
| 对象菜单 | 对象相关的功能按钮菜单 |
| 对象背景颜色 | 设置当前选区所属对象的背景颜色 |
| 背景图片 | 设置当前选区所属对象的背景图片 |
| 绝对或相对位置 | 使选定对象以绝对位置或相对位置方式分布。可以产生多层效果。 |
| 下移一层 | 点一次位置下移一层 |
| 上移一层 | 点一次位置上移一层 |
| 显示边框 (显示或隐藏指导方针) | 以虚线形式显示表格或表单的边框线,使边框为0的表格也可以在设计模式下看到表格线。如已显示,再点则取消显示。 |
| 引用样式 | 对选定的内容使用引用样式效果 |
| 代码样式 | 对选定的内容使用代码样式效果 |
| 工具菜单 | 特殊功能按钮菜单 |
| 插入特殊符号 | 从预定列表中选择插入特殊字符 |
| 插入Excel表格 | 插入一个空的Excel表 |
| 插入表情图标 | 插入表情图标 |
| 插入或修改公式 | 插入或修改公式。使用WEBEQ3接口。需要在客户端安装MS Java虚拟机和WEBEQ插件。 |
| 插入或修改艺术字 | 插入或修改类似Word的艺术字 |
| 插入当前日期 | 插入当前日期。使用客户端机器上的日期及日期格式。 |
| 插入当前时间 | 插入当前时间。使用客户端机器上的时间及时间格式。 |
| 表单菜单 | 表单相关功能按钮菜单 |
| 插入输入框 | 插入一个单行文本输入框<input type=text> |
| 插入文字输入区 | 插入一个多行文本输入框<textarea> |
| 插入单选按钮 | 插入一个单选按钮<input type=radio> |
| 插入复选按钮 | 插入一个复选按钮<input type=checkbox> |
| 插入下拉框 | 插入一个下拉框<select> |
| 插入按钮 | 插入一个按钮<input type=button> |
| 表格菜单 | 表格相关功能按钮菜单 |
| 插入表格 | 插入一个表格 |
| 表格属性 | 编辑选定表格的各项属性值 |
| 单元格属性 | 编辑鼠标当前所在单元格的属性 |
| 拆分单元格 | 把一个单元格拆分为几行或几列 |
| 表格行属性 | 编辑当前鼠标所在表格行的属性 |
| 插入行(在上方) | 在当前选区上方插入一个表格行 |
| 插入行(在下方) | 在当前选区下方插入一个表格行 |
| 合并行(向下方) | 向下合并表格行 |
| 拆分行 | 把当前鼠标所在单元格拆分为2行 |
| 删除行 | 删除当前鼠标或选区所在行 |
| 插入列(在左侧) | 在当前鼠标所在单元格的左侧插入一列 |
| 插入列(在右侧) | 在当前鼠标所在单元格的右侧插入一列 |
| 合并列(向右侧) | 向右合并表格列 |
| 拆分列 | 把当前鼠标所在单元格拆分为2列 |
| 删除列 | 删除选区所在的表格列 |
| 文件菜单 | 文件菜单 |
| 新建 | 清空编辑区 |
| 代码状态 | 切换编辑区到代码状态模式 |
| 编辑状态 | 切换编辑区到所见即所得的在线编辑状态模式 |
| 文本状态 | 切换编辑区到纯文本状态模式 |
| 预览状态 | 切换编辑区到预览状态模式,预览所编辑的内容 |
| 增高编辑区 | 使编辑区变大 |
| 减小编辑区 | 使编辑区变小 |
| 打印 | 打印当前编辑的内容 |
| 缩放菜单 | 缩放菜单 |
| 全屏编辑 | 以全屏的方式编辑,最大化有效的编辑区 |
| 保存并返回 | 保存全屏模式编辑的内容,并返回到非全屏编辑状态。 |
| 关于eWebEditor | 显示eWebEditor 关于对话框 |
| eWebEditor 站点 | 访问 eWebEditor 官方站点 |
下拉选项按钮 | ||
| 字体 | 设置当前选区内文字的字体名称。默认为宋体。可以在语言包中预设此下拉框的选项值。 |
| 字体大小 | 设置当前选区内文字的字体大小,px表示象素,默认为12px大小。可以在语言包中预设此下拉框的选项值。 V4.0版后支持任意大小的字体,不再是只有1号到7号的字体大小。完全使用样式控制。 |
| 样式 | 设置当前选择块的样式 |
| 缩放下拉框 | 按比例放大或缩小选区内的内容 |
2.3 超链接
2.3.1 插入或修改链接
图标:
点击此按钮,将弹出下面的对话框。
插入一个新的超链接,或编辑一个已存在的超链接。当文字或图片被选定时,此功能可以使选定对象产生超链接。 当点击了此按钮,超链接对话框将会显示出来,在对话框中您可以输入或修改目标文件名及协议等。超链接对话框允许您指定以下的设置信息:
l 协议- 当创建超链接时,用于指定你所使用的协议类型。下面列出了常用的几种协议类型。
http: - 跳转到另一个网页
http: - 跳转到另一个网页的某个锚标签
(other) – 跳转到本页的某个锚标签
file: - 下载文件并打开它
mailto: - 发邮件
ftp:, gopher:, telnet:, or wais: - 访问其它网络资源协议
l 链接地址(URL) – 全称:Universal Resource Locator。 在链接地址输入框中输入指向指定文件的URL。关于URL的格式,请参考下面的规则:
如链接到网页和文件,需指定服务器(Server)、路径(path)、和完整的文件名 (包括扩展名),格式如 //Server/Path/File.ext,示例如下:
http://Myserver/Myproj/Startpage.htm
如链接到另一网页的锚书签,需指定如上的链接到网页的格式,后再加“#”符号,再加书签名。示例如下:
http://Myserver/Myproj/Faq.htm#question3
如链接到同一网页的某个锚书签,则只需“#”符号+书签名即可,示例如下:
#contents
如链接到发送邮件,则使用mailto:协议,同时加上指定邮件地址即可,示例如下:
mailto:webmaster@mysite.com
如果是其它的协议类型,请指定相应协议信息格式。
l 链接目标 – 指定此链接的目标窗口类型。
l 书签链接 – 你可以从锚书签下拉框中选择本页已有的书签链接。
2.3.2 锚标签管理
图标:
点击此按钮,将弹出下面的对话框。
l 创建锚:
在对话框“书签名称”处输入锚的名称,就可以在你选定的文本上创建一个锚标签。
l 修改锚:
选定要修改的锚标签,然后在工具栏上点击“书签管理”按钮,在如上的对话框中“书签名称”处会显示你要修改的锚的名字,直接键入要修改的名字,然后点“确定”,则此锚的名称修改完毕。
l 定位锚:
在对话框的“本页其它书签”处会列出本页所有的锚标签,如果有的话,你可以先选定一个书签,然后点“转到”,则编辑区将自动转到您选定的锚的相应位置。
l 删除锚:
在对话框的“本页其它书签”处会列出本页所有的锚标签,如果有的话,你可以先选定一个书签,然后点“删除”,你选定的锚将被删除。
l 使用锚:
当锚创建了后,在“插入或修改超链接”对话框的“书签链接”下拉框中就会有此锚的名称列在那边,你可以直接选择它,即完链接到此锚的操作。
2.3.3 删除选区超链接
图标:
选定要删除的超链接或锚,然后点击此按钮,即可删除选区的超链接或锚标签。
2.3.4 编辑图形热点链接
图标:
此功能可能可视编辑图形的热点链接,即为一个图片,根据区域不同创建多个超链接。当选定一个图片,然后点击此按钮,会弹出如下的对话框:
在上面的操作界面中,你可通过点击“新建”按钮,新建一个热点链接区,新建后在图片中会出现一个矩形框,用鼠标可以移动矩形到你想到链接的位置,然后双击此矩形,则会弹出超链接对话框。在此对话框中,你就可以完成超链接的设置了。多个链接的操作,重复上面的步骤。
2.4 图片
2.4.1 插入或修改图片
图标:
点击此按钮,将弹出下面的对话框。
如果先点选编辑区的图片,然后点击图标,将弹出上面的“图片属性(修改)”对话框。
要修改选定图片的属性,在上面的对话框中设置相应的值,然后点“确定”按钮。
图片来源:
eWebEditor自带有本地文件上传的功能,即能把客户端计算机上的图片传到服务器,使得内容发布后,其它客户端也可以看到此图片。
有两种途径可以设置图片的来源,一种是直接输入图片URL,一种是通过点”浏览”按钮选择本机的图片文件。当从本机选择一个图片文件后,点确定后,此本机图片将自动上传到服务器,并关闭此图片属性对话框。
预览:
点击“预览”按钮,可以在预览区看到,你在图片来源处选择或输入的图片的等比缩放的预览效果。并会显示此图片的宽度和高度。
如果点击“预览”按钮,在预览区没有看到图片效果,请检查,可能你的图片地址输入有误。
特殊效果:
eWebEditor自带了多种图片的特别样式效果,你可以从样式下拉列表中选择你想要一个效果。
特效选项包括:半透明、线型透明、放射透明、模糊效果、风动模糊、正弦波纹、黑白照片、白色透明、投射阴影、阴影、发光、垂直翻转、左右翻转、降低彩色、X光照片、底片等。
2.4.2 背景图片
图标:
点击此按钮图标,将弹出如下的对话框:
此按钮,同时具有插入和修改的功能。当处理的对象上已经有背景图片时,此功能为修改,当还没有背景图片时,此功能为插入。
作用域:
背景图片只能作用于控件或对象之上,当选择是文本时,eWebEditor将寻找此文本的第一个有效的父对象。当选择的对象是有效允许的控件时,此功能有效于此控制。
“背景图片”有效的对象元素有:Page, TD, TR, TH, TABLE. 你可以通过查看对话框的标题栏了解当前的作用域,在标题栏上,括号中的部分即为当前的作用域。如上图中,标题是“背景图片(单元格)”,则说明当前的作用域是表格单元格。
表格行操作:
操作表格行的背景图片:你可以在表格某行的多列选定(就如下图),然后点“背景图片”图标按钮。此时的功能作用域即是表格行,在背景图对话框的标题中将显示“背景图片(表格行)”。
图片来源:
背景图片来源可通过三种方式进行定位。
1、选择本地图片文件。当点“确定”按钮时,本地图片将自动上传到服务器上。
2、直接填写图片的Internet地址,即URL。
3、从“系统”下拉框列表中,选择系统自带的背景图片。
2.4.3 其它图片相关功能:
对图片的处理,除了有插入或修改图片功能,你还可以对选定的图片使用左对齐、居中对齐、右对齐、两端对齐、相对绝对位置、上移一层、下移一层、图形热点链接等功能。
2.5 颜色
2.5.1 颜色对话框
“文字颜色”、“文字背景色”、“对象背景色”三个按钮点击后都将弹出如上的颜色对话框。
您可以直接在“代码”输入框中输入您想要的颜色代码,或用鼠标在色盘中通过点击直接选择。
2.5.2 文字颜色
图标:
要改变文字的颜色,先选定要改变颜色的文字,然后点“文字颜色”图标按钮。
在颜色对话框中,您可以从色盘中选择您想要的颜色,或以16进制表示形式在“代码”输入框中输入指定的值。
2.5.3 文字背景色
图标:
要改变文字的背景色,先选定要改变背景色的文字,然后点“文字背景色”图标按钮。
在颜色对话框中,您可以从色盘中选择您想要的颜色,或以16进制表示形式在“代码”输入框中输入指定的值。
2.5.4 对象背景色
图标:
此功能用于设置对象的背景色,如果选区不是一个对象,则作用于选区的父对象。
在颜色对话框中,您可以从色盘中选择您想要的颜色,或以16进制表示形式在“代码”输入框中输入指定的值。
作用域:
背景颜色只能作用于控件或对象之上,当选择是文本时,eWebEditor将寻找此文本的第一个有效的父对象。当选择的对象是有效允许的控件时,此功能有效于此控制。
“对象背景色”有效的对象元素有:Page、TD、TR、TH、TABLE。
表格行操作:
操作表格行的背景颜色:你可以在表格某行的多列选定(如下图),然后点“对象背景色”图标按钮。此时的功能作用域即是表格行。
2.6 表格
2.6.1 表格菜单
图标:
表格相关的功能有插入或修改表格或单元格等。选择“表格菜单”按钮,将显示所有表格相关的功能按钮列表。灰色表示不可用。
如果某个表格相关功能不可用,您需要选择表格,或者把光标移到您需要修改表格或单元格内。
2.6.2 插入表格
图标:
要插入表格,先把光标点到您想要插入表格的位置,然后点“插入表格”按钮图标。将弹出如下插入表格的窗口:
填写详细后,点“确认”按钮,就可以插入表格,或点“取消”返回编辑器。
2.6.3 修改表格属性
图标:
要修改表格的属性,您可以点选您要修改的那个表格,或把光标移到此表格之内的任何一个位置,然后点“表格属性”按钮图标。将弹出如下的对话框:
在弹出窗口中,所有默认的值都为当前您选择的那个表格所具有的属性值。点“确定”按钮保存您的改变,或点“取消”按钮返回编辑器。
注:如果没有选中表格且光标不在表格内,此功能不可用。
2.6.4 修改单元格属性
图标:
要修改单元格的属性,鼠标点在您想要修改的单元格内,然后点“单元格属性”按钮图标。将弹出如下的单元格属性对话框:
点“确定”按钮保存您的改变,或点“取消”按钮返回编辑器。
注:如果光标不在一个单元格内,或选区跨了多个单元格,此功能不可用。
2.6.5 拆分单元格
图标:
鼠标点在要拆分的单元格内,然后点击“拆分单元格”按钮,将弹出拆分单元格对话框。
在对话框中,拆分行或拆分列可选,您也可以指定拆分的行数或列数。
点“确定”按钮保存您的改变,或点“取消”按钮返回编辑器。
2.6.6 修改表格行属性
图标:
要修改表格某行的属生,鼠标点在要修改的行的某个单元格内,然后点“表格行属性”图标按钮。将弹出如下的表格行属性对话框:
点“确定”按钮保存您的改变,或点“取消”按钮返回编辑器。
注:如果光标不在一个单元格中,此功能不可用;如果光标选区跨了多个单元格,而这多个单元格都在同一表格行,此功能仍可以使用。
2.6.7 插入行(在上方)
图标:
要在选定行的上方插入一行,把光标移到要插入行的单元格内,然后点击“插入行(在上方)”图标按钮。
每次点击都将在选定行的上方插入一行。
注:如果光标不在一个单元格中,此功能不可用;如果光标选区跨了多个单元格,而这多个单元格都在同一表格行,此功能仍可以使用。
2.6.8 插入行(在下方)
图标:
要在选定行的下方插入一行,把光标移到要插入行的单元格内,然后点击“插入行(在下方)”图标按钮。
每次点击都将在选定行的上方插入一行。
注:如果光标不在一个单元格中,此功能不可用;如果光标选区跨了多个单元格,而这多个单元格都在同一表格行,此功能仍可以使用。
2.6.9 合并行(向下方)
图标:
合并当前选定单元格与其下方的单元格。
鼠标点击在要合并的单元格内,然后点击“合并行(向下方)”图标按钮。此功能将把指定单元格与它下边的单元格,合并为一个单元格。
注:如果光标不在一个单元格内,此功能不可用。
2.6.10 拆分行
图标:
把一个单元格拆分为两行。
拆分行,鼠标点击在要拆分的单元格内,然后点击“拆分行”图标按钮。 此功能将把一个单元格拆分为两行。
注:如果光标不在一个单元格内,此功能不可用。
2.6.11 删除行
图标:
要删除行,鼠标点击在要删除行的单元格内,然后点“删除行”图标按钮。
注:如果光标不在一个单元格内,此功能不可用。
2.6.12 插入列(在左侧)
图标:
要在光标所在单元格的左侧插入一列,首先定位光标到您想要插入列的单元格中,然后点击“插入列(在左侧)”图标按钮。
每次点击都将在选定单元格的左侧插入一列。
注:如果光标不在一个单元格内,此功能不可用。
2.6.13 插入列(在右侧)
图标:
要在光标所在单元格的右侧插入一列,首先定位光标到您想要插入列的单元格中,然后点击“插入列(在右侧)”图标按钮。
每次点击都将在选定单元格的右侧插入一列。
注:如果光标不在一个单元格内,此功能不可用。
2.6.14 合并列(向右侧)
图标:
合并当前选定单元格与其右边的单元格。
鼠标点击在要合并的单元格内,然后点击“合并列(向右侧)”图标按钮。。此功能将把指定单元格与它右边的单元格,合并为一个单元格。
注:如果光标不在一个单元格内,此功能不可用。
2.6.15 拆分列
图标:
拆分列,鼠标点击在要拆分的单元格内,然后点“拆分列”图标。此功能将把一个单元格拆分为两列。
注:如果光标不在一个单元格内,此功能不可用。
2.6.16 删除列
图标:
要删除一列,把光标移到您想要删除列的单元格内,然后点击“删除列”图标按钮。
注:如果光标不在一个单元格内,此功能不可用。
2.7 文件上传及导入
2.7.1 远程文件自动上传
图标:
利用远程文件获取功能,可以把别人服务器上的图片等文件自动传到自己的服务器,不要当心别人的站点关了,内容中连接的文件不存在的问题,也不要再一个个下载下来再传上去了,全过程完全自动。
例如:
当你在其它站点浏览到一篇好的带有图片的文章时,如你希望把此篇文章的内容放到自己的站点上。你可以按如下步骤:
1.在那个站点上用鼠标拖动并选定你想要的内容部分,然后复制(CTRL+C)
2.转到自己内容管理系统(CMS)的编辑器编辑区粘贴(CTRL+V)
3.此时你可以看到你想要的内容已经全部复制过来了
但你可以看到,在此时编辑区的图片的地址,还是在别人的站点上。形式如:
<img src="http://www.othersite.com/xxx.gif"> |
如果就这样发布内容,如果当www.othersite.com站点关闭或不能访问时。你的站点的内容中的图片将也不能正常显示。
为了解决这个问题,你希望在发布内容的同时,也能很容易的将其它站点中的图片直接上传自己的服务器上。也就是形式如:
<img src=http://www.yoursite.com/xxx.gif> |
“远程文件自动上传”按钮的功能就是为了解决上面的问题的。当你在编辑器的工具栏上点击这个按钮时,所有编辑区内非自己站点的图片,都将自动上传到自己站点的服务器上。
如,原来的代码是:
<img src="http://www.othersite1.com/a.gif"> <img src="http://www.othersite2.com/b.gif"> |
点击后,代码将转为:
<img src="http://www.yoursite.com/random1.gif"> <img src="http://www.yoursite.com/random2.gif"> |
或:
<img src= "/random1.gif"> <img src="/random2.gif"> |
注意:
1、具体转换后的形式与管理员的设置有关。管理员可以设置为绝对根路径、绝对全路径、相对路径模式。并可以对文件存放的目录及规则进行定义。
2、此功能不仅可以上传图片文件,还可以上传其它任意扩展名的文件,如.RAR, .ZIP, .JPG, .CHM 等等。这个允许文件的类型是由管理员在后台设置的。
你可以通过点击以下的地址链接,观看此功能的在线演示:
http://www.ewebeditor.net/Example/ADV_Remote.asp
2.7.2 本地文件自动上传
图标:
利用本地文件自动上传功能,可以把编辑器内容中含有本地的图片、图表等文件自动上传到服务器。使内容发布后,浏览者也可以看到或下载此文件,而不是只有自己可以看到或下载到。您不需要一个一个文件的插入并上传,一次多个文件同时上传,全过程完全自动化。此功能常用于Word文档粘贴时的自动文件上传。
例如:
当您已经写好了一篇Word文档,您希望把这篇文档中的部分或全部内容放到网站上发布。您可以按如下步骤:
1、在那篇Word文档中用鼠标拖动并选定您想要的内容部分,然后复制(CTRL+C)
2、转到自己内容管理系统(CMS)的编辑器编辑区粘贴(CTRL+V)
3、此时你可以看到你想要的内容已经全部复制过来了
但你可以看到,在此时编辑区的图片的地址,还是在本机上。形式如:
<img src=" file:///C:/ xxx/xxx.gif"> |
如果就这样发布内容,您的计算机上是存在“C:/xxx/xxx.gif”的文件,而浏览者计算机上并不存在“C:/xxx/xxx.gif”的文件。所以,浏览者在浏览此内容时,图片将不能正常显示。
为了解决这个问题,你希望在发布内容的同时,也能很容易的将本地的图片直接上传自己的服务器上。也就是形式如:
<img src=http://www.yoursite.com/xxx.gif> |
“本地文件自动上传”按钮的功能就是为了解决上面的问题的。当你在编辑器的工具栏上点击这个按钮时,所有编辑区内本地的图片,都将自动上传到自己站点的服务器上。
如,原来的代码是:
<img src="file:///c:/xxx/a.gif"> <img src="file:///d:/xxx/b.gif"> |
点击后,代码将转为:
<img src="http://www.yoursite.com/random1.gif"> <img src="http://www.yoursite.com/random2.gif"> |
或:
<img src= "/random1.gif"> <img src="/random2.gif"> |
注意:
1、 具体转换后的形式与管理员的设置有关。管理员可以设置为绝对根路径、绝对全路径、相对路径模式。并可以对文件存放的目录及规则进行定义。
2、 此功能不仅可以上传图片文件,还可以上传其它任意扩展名的文件,如.RAR, .ZIP, .JPG, .CHM 等等。这个允许文件的类型是由管理员在后台设置的。
3、 此功能的使用,需要在客户端安装“eWebEditor客户端软件”插件,才可使用。关于插件软件的安装说明,请参见插件安装说明章节。
点击“本地文件自动上传”图标按钮后,将弹出如下的对话框:
上图对话框中,只有选定了某项才会执行选定那项的操作。点“确定”按钮完成操作。
注:
1、 当Word文档内容粘贴时,也会弹出如上对话框,以便实时完成Word文档内图片等文件的自动上传、VML样式头和Word默认样式的插入。
2、 此功能的使用需要“eWebEditor客户端软件”的支持。如果您是第一次使用此功能,会先弹出“eWebEditor客户端软件”插件的安装界面,此是正常现象,点安装界面上的“确定”,完成插件的安装后,即可弹出如上的界面。
你可以通过点击以下的地址链接,观看此功能的在线演示:
http://www.ewebeditor.net/Example/ADV_Local.asp
2.7.3 Word文档导入
利用Word文档导入功能,您可以把已写好的Word文档内容一次性的导入编辑器中。Word文档中的图片、图表等文件将自动上传到服务器。且在导入的同时,有是否保留VML格式的选项,方便实际的发布应用需要。使用此功能,一键完成Word文档与HTML的转换并导入,不需重新输入等繁杂操作。
点击此按钮图标,将弹出如下的对话框:
上图,点击“浏览”按钮,选择您要导入的Word文档,格式扩展名为“.doc”的文件。然后选择是否保留VML格式,然后点“确定”,当此对话框自动关闭时,Word文档已导入编辑器中。
保留VML格式:
此选项主要针对Word中的图表(Chart)。如果选择“是”,则Word文档中已有的图表以VML格式呈现,不会生成图片文件;如果选择“否”,则Word文档中的已有图表,都将生成图片,并上传到服务器。
保留VML格式选项效果对比:
选项 | 效果 |
是 | 图表(Chart)不会生成图片文件,以VML格式呈现。服务器端文件有可能更少,但编辑器内容区的HTML代码更多。支持VML格式的浏览器,可以使用(IE4以后版本都支持)。 |
否 | 图表(Chart)会生成图片文件,没有VML代码。服务器端文件有可能更多,但编辑器内容区的HTML代码更少。所有浏览器都可以使用。 |
注:
1、 此功能的使用需要“eWebEditor客户端软件”的支持。如果您是第一次使用此功能,会先弹出“eWebEditor客户端软件”插件的安装界面,此是正常现象,点安装界面上的“确定”,完成插件的安装后,即可弹出如上的界面。
你可以通过点击以下的地址链接,观看此功能的在线演示:
http://www.ewebeditor.net/Example/ADV_ImportWord.asp
2.7.4 Excel电子表格导入
图标:
利用Excel电子表格导入功能,您可以把已写好的Excel电子表格中指定的工作表一次性的导入编辑器中。Excel电子表格中的图片、图表等文件将自动上传到服务器。且在导入的同时,有是否保留VML格式的选项,方便实际的发布应用需要。使用此功能,一键完成Excel工作表与HTML的转换并导入,不需重新输入等繁杂操作。
点击此按钮图标,将弹出如下的对话框:
上图,点击“浏览”按钮,选择您要导入的Excel文档,格式扩展名为“.xls”的文件。当选择了有效的Excel文件后,在“工作表”下拉选项中会自动列出,您选择的Excel文件内已有的工作表,选择要导入的工作表。然后选择是否保留VML格式,然后点“确定”,当此对话框自动关闭时,Excel工作表已导入编辑器中。
保留VML格式:
此选项主要针对Excel中的图表(Chart)。如果选择“是”,则Excel文档中已有的图表以VML格式呈现,不会生成图片文件;如果选择“否”,则Excel文档中的已有图表,都将生成图片,并上传到服务器。
保留VML格式选项效果对比:
选项 | 效果 |
是 | 图表(Chart)不会生成图片文件,以VML格式呈现。服务器端文件有可能更少,但编辑器内容区的HTML代码更多。支持VML格式的浏览器,可以使用(IE4以后版本都支持)。 |
否 | 图表(Chart)会生成图片文件,没有VML代码。服务器端文件有可能更多,但编辑器内容区的HTML代码更少。所有浏览器都可以使用。 |
自动滚动:
当选“是”时,会在表格的最外围加入一个自滚动层。此功能的作用在于,当所导入的电子表格很宽时,在显示页面显示时页面不会被撑大或看不到,会自动加上滚动条以完整显示表格。
表格边框:
EXCEL电子表格默认是没有边框线的,如果没有在EXCEL制表时加入边框线,导入时看不到边线,不直观。使用此功能可以自动给未加边线的电子表加边框线。
注:
1、 此功能的使用需要“eWebEditor客户端软件”的支持。如果您是第一次使用此功能,会先弹出“eWebEditor客户端软件”插件的安装界面,此是正常现象,点安装界面上的“确定”,完成插件的安装后,即可弹出如上的界面。
你可以通过点击以下的地址链接,观看此功能的在线演示:
http://www.ewebeditor.net/Example/ADV_ImportExcel.asp
2.8 eWebEditor客户端软件安装说明
浏览器安全的默认设置为网页中的脚本程序是不允许访问本地文件的。为了满足“Word文档导入”和“本地文件自动上传”功能的需要,我们发布了“eWebEditor客户端软件”插件,使需要此功能的用户可以使用此插件所带来的强大功能。
只有“Word文档导入”和“本地文件自动上传”两项功能的使用需要安装此插件。无需使用此功能用户,可以不要安装。
我们保证代码的安全的。请认准正版“eWebEditor客户端软件”。“eWebEditor客户端软件”正式取得微软代码签名证书,通过Thawte验证(Thawte Code Signing Certificates)。在安装前,请认准以下的界面标识,只有拥有以下界面的认证信息,才是我们发布的正式版软件。
2.8.1 Win2000客户端安装
Win2000操作系统的默认安全设置即会弹出如下的安装对话框:
在上图中,点击“是(Y)”按钮,即可完成安装;点击“eWebEditor客户端软件”字样,可以打开http://www.ewebeditor.net/站点;点击“High-point Software Ltd.”字样,会弹出如下的证书详细信息页。
2.8.2 Win2003客户端安装
Win2003操作系统,主要用于服务器,默认安全设置为不允许使用任何插件,包括授权信任安全的插件也不能使用。如果您使用的Win2003操作系统,请确认已经打开插件安装提示。
打开插件安装提示按如下操作:打开IE浏览器,选择“工具”菜单à选择“Internet选项”à在弹出对话框中选择“安全”选项卡à在“安全”选项卡中点“自定义级别”à将弹出如下图的安全设置,默认“ActiveX控件自动提示”是禁用的,请启用它。
“ActiveX控件自动提示”启用后。当点击“Word文档导入”等需要“eWebEditor客户端软件”支持的对话框时,就会先弹出如下的插件安装界面:
在上图中,点击“安装(I)”按钮即可完成安装;点击“eWebEditor客户端软件”字样,可以打开http://www.ewebeditor.net/站点;点击“High-point Software Ltd.”字样,会弹出如下的数字签名详细信息页。
在上面界面中,点击“查看证书”按钮,即可打开如下的证书详细信息页:
2.8.3 WinXP客户端安装
WinXP操作系统的默认安全设置是允许授权插件自动安装的,所以默认情况,不需要点击,即可完成安装。
2.8.4 安装说明
当第一次使用插件相关功能时,如弹出安装界面,点“确定”或“是”即可完成软件的安装。
如果点击某个功能按钮时,没有弹出安装界面且功能不能使用,请检查一下IE的安全选项中是否允许下载ActiveX控件。在任何情况下,使用Win2000和WinXP操作系统的用户可以把IE的安全设为默认级别即可;使用Win2003操作系统的用户可以先把IE的安全设为默认级别,然后按上面的说明,打开“ActiveX控件自动提示”设置即可。
注:
1、 插件软件运行需要VB6运行库的支持,默认Win2000/WinXP/Win2003都自带有此运行库,无需另装。
2、 软件功能要求把本地文件自动上传到服务器,如果客户端机上有装防火墙类软件,请设置允许此软件访问网络。
2.9 快捷键
eWebEditor 提供了如下的快捷键:
2.9.1 移动
描述 | 键 |
向右移动一个字符 | RIGHT ARROW(右箭头) |
向左移动一个字符 | LEFT ARROW(左箭头) |
下移一行 | DOWN ARROW(上箭头) |
上移一行 | UP ARROW(下箭头) |
向右移一个单词 | CTRL+RIGHT ARROW |
向左移一个单词 | CTRL+LEFT ARROW |
移动到当前行尾 | END |
移动到当前行头 | HOME |
向下移一个段落 | CTRL+DOWN ARROW |
向上移一个段落 | CTRL+UP ARROW |
向下翻一页 | PAGE DOWN |
向上翻一页 | PAGE UP |
移到整个文档开头 | CTRL+HOME |
移到整个文档末尾 | CTRL+END |
循环切换操作元素 | TAB |
反循环切换操作元素 | SHIFT+TAB |
2.9.2 选区
描述 | 键 |
使选区向右扩展一个字符 | SHIFT+RIGHT ARROW |
使选区向左扩展一个字符 | SHIFT+LEFT ARROW |
使选区向右扩展一个单词 | CTRL+SHIFT+RIGHT ARROW |
使选区向左扩展一个单词 | CTRL+SHIFT+LEFT ARROW |
使选区向上扩展一行 | SHIFT+UP ARROW |
使选区向下扩展一行 | SHIFT+DOWN ARROW |
使选区扩展到当前行尾 | SHIFT+END |
使选区扩展到当前行头 | SHIFT+HOME |
使选区向下扩展一页 | SHIFT+PAGE DOWN |
使选区向上扩展一页 | SHIFT+PAGE UP |
使选区扩展到整个文档尾 | CTRL+SHIFT+END |
使选区扩展到整个文档头 | CTRL+SHIFT+HOME |
全选 | CTRL+A |
2.9.3 编辑
描述 | 键 |
删除选区;如果没有选区,在光标位置向左删除一个字符 | BACKSPACE |
在插入点左边删除一整个单词,不包含空格 | CTRL+BACKSPACE |
拷贝选区内容到剪贴板 | CTRL+C |
粘贴剪贴板内容到当前光标所在位置,或替换当时选区 | CTRL+V |
从Microsoft Word粘贴。此功能可以删除Word中过多的冗余格式,使HTML文档更简洁。 | CTRL+D |
剪切,拷贝选区内容到剪贴板并删除选区内容 | CTRL+X |
删除选区内容,不会放入剪贴板;如果没有选区,则向右删除一个字符 | DELETE |
在插入模式和覆写模式间转换 | INSERT |
撤消上次操作 | CTRL+Z |
重做最近一次操作 | CTRL+Y |
查找文字 | CTRL+F |
查找/替换 | CTRL+R |
右键菜单(相当于在编辑区内的右键点击) | SHIFT+F10 |
插入<br> | SHIFT+ENTER |
切换到HTML源代码编辑模式 | CTRL+1 |
切换到可视编辑模式 | CTRL+2 |
切换到纯文本编辑模式 | CTRL+3 |
切换到预览模式,预览当前正在编辑的内容 | CTRL+4 |
增大编辑区 | CTRL++ |
减小编辑区 | CTRL+- |
显示eWebEditor关于对话框 | F1 |
显示或隐藏指导方针。作用于表格和表单,当表格边框为0时,可以以虚线的形式显示表格框,此框只在设计时有效,方便表格的定位。 | F2 |
2.9.4 格式化
描述 | 键 |
粗体 | CTRL+B |
斜体 | CTRL+I |
下划线 | CTRL+U |
2.10 选择元素
下面的表格描述了选区行为。
要执行的操作 | 方法 |
选择多个字符 | 在文字上点击并拖动 |
选择光标所在处和鼠标点击处之间的文字 | SHIFT+点击 |
选择一个单记号 | 双击 |
选择一个段落 | CTRL+双击 |
移动或拷贝选区 | 选择文字,释放鼠标,然后拖动到一个新的位置。使用左键移动选区;使用右键出现拷贝菜单。 注:如果拖到一个已存在的段落,拖动的文字具有其段落的属性 |
3 开发手册
3.1 程序包说明
ewebeditor
这个文件夹包含了eWebEditor运行所需的所有文件、例子和可视配置工具,你可以把这个目录及下的所有文件上传到你的WEB服务器(web server),以完成快速安装。关于安装更多请参见详细安装说明。
_example
这个目录包含了多个编辑器各种方法的调用示例脚本文件。您可以在您想使用的地方,拷贝和使用这些例子程序。
当你的应用程序正式运行后,此目录可以从你的web server中删除,不影响编辑器的使用。
admin
后台管理目录,包含编辑器可视设置所需的所有动态服务器端脚本文件。你可以通过HTTP的方式访问此目录中的文件,对样式,工具栏等进行可视化的设置。
当你的应用程序正式运行后,此目录可以从你的web server中删除,不影响编辑器的使用。
asp/php/jsp/aspx
针对不同的平台,会提供相应的目录,此目录中为上传文件等必须的服务器端功能而使用的服务器端程序文件
buttonimage
按钮图片目录。此目录包含了eWebEditor工具栏上所有的按钮图标文件。
blue
系统自带的一整套蓝色按钮图标文件目录,默认的图标文件目录。
gray
系统自带的一整套灰色按钮图标文件目录。
css
控制编辑器显示效果的样式文件。一套效果存放在一个子目录中,每套效果都包含整个编辑器、编辑器编辑区、编辑器菜单的样式定义。
coolblue
系统自带的一套酷蓝样式,默认的样式目录。
blue
系统自带的一套蓝色样式
green
系统自带的一套绿色样式
light
系统自带的一套亮色样式
mx
系统自带的一套MX风格样式
office
系统自带的一套Office风格样式
office3d
系统自带的一套Office 3D风格样式
red
系统自带的一套红色样式
yellow
系统自带的一套黄色样式
dialog
对话框文件所在目录。包含高级功能对话框所需的html等静态文件。
language
语言包文件所在目录。每种语言包,包括一个.js文件和一个.css样式文件。
eWebEditor的超强多语言界面功能,使得不同的语言,可以选择不同的默认界面字体大小,字体名称等。最大化的满足不同的语言都有最佳的界面效果。
js
公用JavaScript文件目录。
style
样式目录。此目录中的文件中由后台管理程序自动生成,每个文件表示一种最终的显示效果及一系列的参数定义。
systemimage
系统图片文件目录。包含系统自带的背景图片,表情图标等。
bg
背景图片目录
emot
表情图标目录
file
文件类型图标目录
uploadfile
系统默认的上传文件目录。如按默认设置,所有上传的文件即保存在此目录中。
3.2 安装说明
eWebEditor的安装是非常容易的,你只要把压缩包中的所有文件上传到服务器即可。
3.2.1 上传文件
通过购买,您将获得eWebEditor软件压缩包。使用解压软件解压所有文件到一个临时目录,如c:/myTemp。解压后,在c:/myTemp下您将看到一个名为“ewebeditor”的文件夹.
使用FTP上传软件,把“ewebeditor”目录及其下的所有文件上传到您的WEB服务中的任意的您想要的位置下。
所有文件上传完成后,您即可以测试eWebEditor了。详细测试见下节。
3.2.2 测试eWebEditor
以下假设您已经把”ewebeditor”目录上传到了你WEB服务器的根目录中。
测试访问我们提供的示例程序文件,看是否运行正常. 以下为系统提供的例子的首页地址:
http://www.yoursite.com/ewebeditor/_example/default.asp(.aspx/.php/.jsp)
系统自带有多个例子程序,分别用于说明eWebEditor的各种使用方法. 通过示例程序首页的链接,分别测试各个例子,看是否运行正常。如果显示正常信息,没有错误提示,可以编辑内容,即表示安装已正确完成!
恭喜,eWebEditor编辑器已成功安装完成!
注意:如果编辑器上的按钮不能操作,或内容不能编辑,请确认您使用的是IE5.5以上版本浏览器,并允许运行JavaScript(默认安装都是允许的)。
3.2.3 数学公式编辑插件安装
此安装为可选安装。
eWebEditor提供了WEBEQ数学公式编辑插件的接口。
WEBEQ是Design Science, Inc.公司开发的交互式数学公式编辑器,详情请见:
http://www.dessci.com/en/products/webeq/
当前支持的是WEBEQ3.0版本,要使用此功能需要在客户端安装WEBEQ3.0插件。只有安装了此插件后,才能正常浏览或编辑公式。
WEBEQ3.0需要Microsoft Java Virtual Machine(MSJVM)支持。
当您获取得了正版的WEBEQ程序文件后,您只要把您获得的WEBEQ程序文件WebEQInstall.cab拷贝到ewebeditor/dialog目录中,即可完成WEBEQ与eWebEditor的集成。
当完成上面的拷贝后,最终用户当点击公式编辑的操作按钮时,如果此客户端还没有安装WEBEQ,系统会自动提示安装WEBEQ插件。
注意:WEBEQ3需要MSJVM的支持,请先安装MSJVM,再安装WEBEQ。
除了内容的编辑,浏览含有公式的内容时,要使公式可见,也需要在客户端安装WEBEQ浏览插件。你可以在您的系统专门提供一页,供安装WEBEQ插件。按如下的代码专门制作一个网页,如命名名"installwebeq.html",此客户访问此页时,将自动提示安装WEBEQ插件。代码如下:
<HTML> <HEAD> <TITLE>Installing WEBEQ3.0</TITLE> </HEAD> <BODY> <OBJECT CLASSID="clsid:41649A90-B484-11d1-8D75-00C04FC24EE6" CODEBASE="....../ewebeditor/dialog/WebEQInstall.cab#Version=3,0,1,6" HEIGHT=1 WIDTH=1></OBJECT> </BODY> </HTML> |
以上代码中的插件文件的路径,请相应改为自己安装的路径。
注意:我们只提供了WEBEQ与eWebEditor集成的接口,不提供WEBEQ相关程序的销售及技术支持。所有WEBEQ相关版权归其版权人所有。
3.3 集成调用
eWebEditor的调用是非常简单,基本上只是在原来的使用中加入一行代码。
3.3.1 标准调用
要把eWebEditor集成到你原有的web应用系统中,你基本只需在原来的代码上,再加上一行如下形式的代码即可。
<iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
参数说明:
l /ewebeditor.htm应改为你实际安装的路径
l 参数id: 相关联的表单项名,也就是提交保存页要引用的表单项名,多个调用时,请保证id不同,可参见后面例子
l 参数style: 使用的样式名,可以是标准的样式名或自定义的样式名,如果使用标准coolblue可留空
l width, height: 根据实际需要设置,eWebEditor将自动调整与其适应
l 在后台管理中,可以得到每个样式的最佳调用代码
l 更多参数,请见参数设置说明
例子:新增表单
在未使用eWebEditor前,你原来新增内容的表单可能是如下形式:
<textarea name="content1" rows=10 cols=50></textarea> |
使用eWebEditor后,现在是如下形式:
<input type="hidden" name="content1" value=""> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
或者
<textarea name="content1" style="display:none"></textarea> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
例子:修改表单
你原来可能是:
<textarea name="content1" rows=10 cols=50><%=Server.HTMLEncode(s_Content)%></textarea> |
现在是:
<input type="hidden" name="content1" value="<%=Server.HTMLEncode((s_Content)%>"> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
或者
<textarea name="content1" style="display:none"><%=Server.HTMLEncode((s_Content)%></textarea> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
3.3.2 弹窗调用
v2.7.5版本后加入了弹窗调用功能,能实现通过一个链接弹窗打开编辑器,并将编辑的内容保存入指定的表单域。
在eWebEditor根目录下文件名为popup.htm,提供的接口传入参数如下:
l style : 样式名
l form : 要返回或设置值的表单form名
l field : 要返回或设置值的表单项textarea名
调用形式如:
/ewebeditor/popup.htm?style=coolblue&form=myform&field=myfield
使用例子如下:
<HTML> <BODY> <Script Language=JavaScript> function eWebEditorPopUp(style, form, field) { var oPopUp = window.open("popup.htm?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 Editor" ONCLICK="eWebEditorPopUp('popup', 'myForm', 'myField')"> </FORM> </BODY> </HTML> |
3.3.3 参数设置
eWebEditor的接口调用页为eWebEditor根目录中的“ewebeditor.htm”文件,您可以以如下的传参数形式完成eWebEditor编辑器的调用:
.. /ewebeditor/ewebeditor.htm?id=content1
Parameter | Description |
id | 相关联的保存编辑内容的表单项名,也就是提交保存页要引用的表单项名 |
style | 使用的样式名,可以是标准的样式名或自定义的样式名,如果使用默认的coolblue可留空 |
originalfilename | 相关联的保存上传原文件名列表的表单项名,必须是input类型,可以带onchange事件 |
savefilename | 相关联的保存上传保存文件名列表的表单项名,必须是input类型,可以带onchange事件 |
savepathfilename | 相关联的保存上传保存文件名(带路径)列表的表单项名,必须是input类型,可以带onchange事件 |
extcss | 外部样式表引用,是相对ewebeditor目录的路径文件,文件名为.css |
cusdir | 自定上传路径接口,后台可设此功能开关,轻松实现把不同用户的上传文件分别存在不同目录中。同时服务器端文件浏览也与此关联,用户只能浏览自己的文件夹。 |
关于上传文件接口参数的应用,可以参见我们提供的在线演示例子:
http://www.ewebeditor.net/example/i_upload.asp
或我们提供的程序压缩包的例子运行文件:
http://www.yoursite.com/ewebeditor/_example/para_file.asp(.aspx/.php/.jsp)
有关外部样式接口参数的应用,可以参见我们提供的在线演示例子:
http://www.ewebeditor.net/example/i_extcss.asp
或我们提供的程序压缩包的例子运行文件:
http://www.yoursite.com/ewebeditor/_example/para_extcss.asp(.aspx/.php/.jsp)
3.3.4 注意事项
1. 调用参数id与表单项名必须相同
如,下面的代码中,蓝色部分必需是相同的,且区分大小写。
<input type="hidden" name="content1" value=""> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" height="350"></iframe> |
2. eWebEditor允许在同一表单里有多个实例,所以请保证id在整个网页中是唯一的。
如:
<form> <input type="hidden" name="content1" value=""> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" height="350"></iframe>
<input type="hidden" name="content2" value=""> <iframe ID="eWebEditor2" src="/ewebeditor.htm?id=content2&style=coolblue" frameborder="0" scrolling="no" width="500" height="350"></iframe> </form> |
3. 在使用<textarea>作为原表单项时,要加入style="display:none"
<textarea name="content1" style="display:none"></textarea> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" height="350"></iframe> |
4. 当使用<input>形式做为修改表单时,一定要用双引号,不能用单引号,且要加HTMLEncode函数,否则有可能内容被截掉。
例如:
(ASP代码)
<input type=hidden name="content1" value="<%=Server.HTMLEncode(str)%>"> |
或
<textarea name="content1" style="display:none"><%=Server.HTMLEncode(str)%></textarea> |
(PHP代码)
<input type=hidden name="content1" value="<?=htmlspecialchars($str)?>"> |
或
<textarea name="content1" style="display:none"><%=htmlspecialchars($str)%></textarea> |
3.4 表单接收
请确定eWebEditor编辑器被放在一个表单(form)中。
当此表单提交时,获取eWebEditor的值,就如获取普通的多行文本输入框<textarea>相同。
示例:
在下面的示例中,我们将创建一个HTML脚本文件用于显示编辑器的调用表单,一个ASP的脚本文件用于接收表单提交过来的内容并显示它。
创建一个名为“editor.html”的HTML脚本文件,并输入如下代码:
<html> <head> <title>Untitled</title> </head> <body> <form name="myform" method="post" action="display.asp"> <input type="hidden" name="content1" value=""> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> <input type="submit" name="btnSubmit" value="Submit"> </form> </body> </html> |
ASP:
创建一个名为“display.asp”的脚本文本,并输入如下代码:
<% Response.Write Request("content1") %> |
PHP:
创建一个名为“display.php”的脚本文本,并输入如下代码:
<?php echo stripslashes($_POST['content1']); ?> |
运行第一个脚本文件,您将看到编辑器被调用显示。在编辑器中输入一些内容,然后点“提交”。文档内容将被提交到第二个脚本文件,在这个文件中直接显示出刚才所编辑的内容。
在您实际的应用系统中,您可以把提交过来的内容保存到数据库或文件中,而不是如上示例的只显示。更多请参见示例目录的示例。
3.4.1 大文本处理
此功能仅限于ASP环境版本。
在ASP开发环境中,一个输入框有102399字节的限制(100K左右),大文本内容不能使用正确提交及接收.。eWebEditor自带有对此限制的处理机制,不会受此条件的约束,理论上支持无限大文件。
但在接收表单提交过来的内容时,应注意使用下面的方法。
普通的取值方法:
<% sContent = Request.Form("content1") %> |
大文本的取值方法:
<% sContent = "" For i = 1 To Request.Form("content1").Count sContent = sContent & Request.Form("content1")(i) Next %> |
3.5 可视化配置管理
eWebEditor除了具有很强的在线编辑功能,对于开发者,还具有很强的在线可视配置功能。
通过在线后台管理,你可以方便的对样式进行可视化配置和对上传文件进行管理。
可视化配置让开发人员真正远离代码级别配置的苦海。开发人员不再需要用几周的时间去了解并记住定制所需用到的程序的结构,对象的属性,方法等。可视化的配置需要的可能只是轻轻一点。
例如:在其它同类产品中,为了实现工具栏的定制功能,开发人员可能需要在脚本文件中输入下面的代码,以实现定制.
editor.ShowBorders = true ; editor.Properties = value ; ... editor.ToolbarSets["abc"] = [ ['Cut','Copy','Paste','Undo','Redo','-','Bold','Italic','JustifyCenter'], ['key1','key2','key3'] ... ] ; |
在上面例子中,开发人员面对的是一堆的代码,他要改动这些代码以实现所需的定制。这是非常困难的,相对要求开发人员具有很高的水平,且要非常的了解整个代码中的关键字,如'Cut', 'JustifyCenter'等等,还有更多。要知道每个属性值的类型及允许的值范围等。且可能为了一个设置,需要改动多个代码段落。
使用可视化的设置就完全不需要花大量的时间来读懂程序并记忆了。对于企业不用担心一个开发人员的离职,另一个新手又得花时间学习。也不要求企业有非常高级的开发人员才能使用此产品。企业也不用担心开发人员一段时间没有使用,过段时间再用时又忘记了那么关键字。
可视化配置的好处非常明显,下面就让我们一起进入可视化配置,体验可视化配置带来的愉悦吧。
3.5.1 后台管理
当eWebEditor相关文件上传到你的WEB服务器上后,你可以通过以下地址访问后台管理登录页:
http://www.yoursite.com/ewebeditor/login.asp(.aspx/.php/.jsp)
显示页面如下图:
系统初始的管理员用户名及密码如下:
Username: admin
Password: admin
出于系统安全的考虑,强烈建议您修改默认的管理员用户名及密码!
登录后,将进入后台管理的首页,效果图如下:
整个后台管理界面,左边为导航条,右边是操作区。默认首页中除了有系统的版本信息,我们的联系方式,还带有服务器环境的检测和系统通知。
服务器环境检测
您可以通过服务器环境检测,查看自己主机空间的组件对象的支持情况等服务器环境信息。
当有些功能需要一些服务器的组件支持时,通过查看此信息以便能确定这些附加功能是否可用。
同时当需要技术支持时,您可以把此信息发送给我们,以便我们能依据此信息更快速的解决您的问题。
系统通知
进入后台管理首页,在主页面上你可以实时的看到eWebEditor产品相关的最新通知,以便及时升级或获取最新的补丁程序。
在后台管理中主要是可视化配置(即样式管理)功能,还附带有上传文件管理和修改登录密码功能。
注意:后台管理程序,要求ewebeditor目录有写的权限。同时要求WEB服务器支持相应的写文件对象,如ASP版的要求支持文件系统对象(FSO)。此要求只适用于后台管理程序,与编辑器的前台使用无关。
3.5.2 样式管理
这里的“样式”是指包括编辑器界面颜色,工具栏按钮图片、个数及排序,允许上传的文件扩展名及大小,是否使用缩略图及水印等一系列参数的一整套设置方案。
点击后台管理左边导航条的“样式管理”,进入如下的样式管理操作界面:
以下为样式管理页各功能按钮的功能描述.
l 所有样式列表
当操作进入本模块的更深层页面时,随时可以通过点击此链接,返回样式管理首页。
l 新建一样式
点此链接,将进入样式新增表单填写页,按表单填写各项设置后点[提交],即完成了新增一个样式。表单中每项的填写说明,请见''样式属性"章节。
l 更新所有前台配置文件
为了提高程序的执行效率及易集成,eWebEditor使用了前后台分离的结构。即整个后台目录admin,在配置完后,可以从服务器删除,不影响编辑器在前台的正常使用。
当每个配置信息提交后,程序将把这些配置信息写入文本文件。要写入的文件及目录如下:
n 客户端配置文件
ewebeditor/style/目录下,每个样式按样式的名称存为一个.js客户端脚本文件。
如:ewebeditor/style/coolblue.js,表示名称为"coolblue"的样式的配置文件。
n 服务器端配置文件
(ASP版) ewebeditor/asp/config.asp
(PHP版) ewebeditor/php/config.php
(.NET版) ewebeditor/aspx/config.aspx
(JSP版) ewebeditor/jsp/config.jsp
之所以分为客户端配置文件和服务器端配置文件,是从提高程序的执行效率和系统的安全性两方面进行考虑的。
在提高程序的执行效率上,我们尽量把界面相关的配置,如界面的颜色,工具栏按钮的个数及顺序等保存在客户端脚本文件中,以节省服务器的资源及提高程序执行效率。
从系统安全性上考虑,有些设置是不能保存在客户端脚本文件中的,如允许上传文件的扩展名,以我们正常设置,以gif, jpg, doc, rar, zip为扩展名的文件是允许上传的,但如果保存在客户端,则意味着服务器的程序处理是由客户端参数决定的。这时,如果操作用户自己定制了一个表单,允许上传如.asp, .aspx, .php, .jsp 这样的文件,然后上传了一个服务器端的黑客程序,对于安全性是可想而知的。这最终导致的结果不仅是编辑器的不能使用,更重要的是使得整个站点都在黑客的控制之中。而对于安全性的考虑上这点,基本市面的同类产品很少涉及,这也是我们产品的一个重要区别之处。当然,并不只是扩展名,还有一些参数也保存于服务器配置文件,在"样式属性"章节再做详细介绍。
正常情况下,您不需要点击功能链接来更新前台的配置,因为当您的每个设置修改并提交后,程序将自动更新配置文件。只有当特殊情况下,如配置文件丢失时,您才有必要通过此功能重新生成这些配置文件。
l 返回前一页
就如IE浏览器中的[后退]按钮功能一样。
l 预览
当某个样式的配置信息设置完后,您可以通过此功能,快速的预览您的设置结果,并进行测试。
l 代码
通过此功能您可以得到与您系统集成的编辑器最佳调用代码。进入操作界面,直接把显示出来的代码片段拷贝,并粘贴到您的系统即可完成集成。
l 设置
使用此功能修改每个样式的参数设置,包括按钮图片目录,样式风格,上传文件目录及扩展名,等等设置。具体每个参数的设置说明,请见"样式属性"章节
l 工具栏
通过此功能,可以对指定样式的工具栏及工具栏上的按钮进行管理配置,包括工具栏的条数,每条工具栏上的按钮个数及顺序,等。详细请见"工具栏管理"章节。
l 拷贝
通过此功能,您可以快速的新建基于指定样式的拷贝。与"新建一样式"比较,您可以省去很多默认设置的填写。
例如:当在"coolblue"样式所在行右边,点击“拷贝”,此时您将看到在样式列表中多了一个名称为"coolblue1"的样式。此"coolblue1"与"coolblue"的设置信息是完全相同的,只是名称不同,这时你可以在"coolblue1"基础上进行修改,以快速方便的完成您所需要的一点点定制设置。
使用“拷贝”功能,您不必为了需要很小一部分的定制,而全部重填所有的参数。
l 删除
删除指定的样式。请注意操作,删除后不可恢复。
3.5.3 样式属性设置
在样式的新增和修改设置中,我们都将看到如下的界面:
在以上的操作界面输入框中,鼠标移到指定的输入框上,都会看到有更为详细的设置说明。
注意:不同版本(ASP版, PHP版, .NET版, JSP版)的设置选项可能会有一些不同,但总体基本是一样的。
普通设置部分
l 样式名称
样式名称应是唯一的,取一个比较好记的名称,同时将用于调用。
如下面的调用中,"coolblue"指的就是这个名称。
<IFRAME ID="eWebEditor1" SRC="ewebeditor.htm?id=XXX&style=coolblue" FRAMEBORDER="0" SCROLLING="no" WIDTH="550" HEIGHT="350"></IFRAME> |
l 初始模式
编辑器共有4种模式:代码模式、编辑模式、纯文本模式、预览模式
初始模式,指的是页面打开时,默认使用的模式。
l 按钮图片目录
指定工具栏上按钮图片存放的目录名。按钮图片都必须放在'ewebeditor/buttonimage/'目录中。这个目录下的子目录都包括有一整套编辑器所需的按钮图片,图片标准格式为20px*20px。
当前,系统自带有2套图片按钮,分别为"blue"和"gray",默认是"blue"。
当然,你也可以自己定制一套图片,然后存放在buttonimage目录中,并在此定义引用。
l 样式文件目录
指定CSS样式定义文件及定义文件中有用到的图片文件存放的目录名。系统自带有9套样式,分别为:blue, coolblue, green, light, mx, office, office3d, red, yellow. 您可以在输入框中直接输入上面的任一个,或者用您自己定义的样式。
每套样式,都固定包括三个CSS文件:
editor.css: 整个编辑器外外围(包括工具栏和状态栏)的样式设定文件
editorarea.css: 编辑器中部编辑区(即输入区)的样式设定文件
menuarea.css: 编辑器菜单(包括右键菜单和按钮菜单)的样式设定文件
l 最佳宽度
编辑的最佳调用宽度,通过此设置后,然后查看预览,就可以直观的看到自己设定的编辑器大约在调用时用多大的宽度最合适。单位为象素px.
l 最佳高度
编辑的最佳调用高度,通过此设置后,然后查看预览,就可以直观的看到自己设定的编辑器大约在调用时用多大的高度最合适。单位为象素px.
l 显示状态栏
设定在页面打开时,编辑器有没有带状态栏。“有”或“无”可选,默认是“有”。
当您的应用系统最终用户只需要可视编辑模式,而不需要其它的模式时,可以通过设定此选项为“无”实现。
l 自动Word粘贴检测
指定当操作者从Word中拷贝(CTRL+C)内容,然后在编辑器中粘贴(CTRL+V)时,是否会自动有如下的提示确认对话框:“你要粘贴的内容好象是从Word中拷出来的,是否要先清除Word格式再粘贴?”
有“是”和“否”两个选项,系统的默认设置“是”,是有提示对话框的。
l 允许远程文件上传
指定是否允许上传远程文件,默认是“允许”。当设为“不允许”,工具栏的“远程自动上传”按钮功能将无效。
远程文件上传功能,能把其它站点上的文件(如图片文件,flash文件等)上传到自己的站点内。关于远程文件的功能,请参见相关章节的说明。
l 显示或隐藏指导方针
指编辑器页面打开时,初始的“显示或隐藏指导方针”功能是开的还是关的。此处只是初始值,最终用户可以通过点击工具栏上的“显示或隐藏指导方针”图标,使用此功能。
当“显示或隐藏指导方针”功能为打开时,表格的边线会有一条虚线显示,即使border=0。这样方便表格的选定操作,及了解表格当前的定位。
l 自动语言检测
eWebEditor是支持多语言的。
当此选项设置为"是"时,eWebEditor将自动检测客户端操作系统的语言环境,并选择适合其环境的语言界面。当未找到适合的语言包时,将按"默认语言"中的设置进行显示。
当此选项设置为"否"时,不管客户端操作系统是什么语言环境,都将使用"默认语言"中的设置。
l 默认语言
eWebEditor默认使用的语言界面。参见"自动语言检测"设置。
l 备注说明
对此样式的概括说明,方便记忆。
上传文件路径相关设置
l 上传组件
在不同的平台上,eWebEditor提供了对多种上传组件或类的支持,使您可以跟据您的WEB服务器的情况,使用适合自己的上传方法。
以下为各版本当前支持的上传方法列表:
ASP版:无组件上传类(默认), ASPUpload, SA-Fileup, LyfUpload
.NET版:.NET自带上传方法(默认), ASPUpload, SA-Fileup, LyfUpload
PHP版:PHP自带上传方法
JSP版:JspSmartUpload
l 年月日自动目录
通过此设置,指定是否在上传文件的同时,自动创建日期格式的目录。共有4个选项:
不使用:(默认)不创建目录,直接存到指定上传目录。如:uploads/xxx.gif
年目录:在指定上传目录下,按年格式创建目录。如:uploads/2005/xxx.gif
年月目录:在指定上传目录下,按年月格式创建目录。如:uploads/200501/xxx.gif
年月日目录:在指定上传目录下,按年月日格式创建目录。如:uploads/20050101/xxx.gif
l 上传文件浏览
指是否允许操作人浏览并插入已上传的图片等文件。此设置默认为关闭。
如果开启此功能,则在前台插入图片、插入媒体、插入FLASH、插入其它文件的对话框中会多一个“浏览”服务器上相应文件的按钮,如下图:
点击浏览按钮,将出现下图所示的文件浏览对话框。具有文件夹浏览,图片放大、缩小、实际尺寸、最佳大小的预览调整功能。如下图:
l 自定上传路径接口
默认此功能关闭。如果启用此功能,您可以使用上传路径接口在程序中动态设置上传的路径。此功能常用于多用户的系统中,把不同的用户上传的文件分别存为不同的文件夹中。
接口名称为:cusdir。当关闭此功能时,此接口无效。示例如下:
<IFRAME ID=”eWebEditor1” SRC=”ewebeditor.htm?id=XXX&style=coolblue&cusdir=../uploads/user/” FRAMEBORDER=”0” SCROLLING=”no” WIDTH=”550” HEIGHT=”350”></IFRAME> |
l 路径模式
有三种路径模式可供选择:相对路径,绝对根路径,绝对全路径。这多种路径模式,能完全满足站点迁移及各类应用系统在文件路径上的需要。
您需要选择哪种模式,只要从下面的样例中选择您要的格式,即能确定。
相对路径模式:最终文件格式如: src="../xxx/xxx.gif"
绝对根路径模式:(默认模式)最终文件格式如: src="/xxx/xxx.gif"
绝对全路径模式:最终文件格式如: src=http://www.yoursite.com/xxx/xxx.gif
l 上传路径
是指上传文件保存的路径,默认设置为"uploadfile/",即实际保存于ewebeditor/uploadfile/目录。
这里设置的路径是相对ewebeditor根目录而言的。
例1, 如您的系统目录结构如下:
eWebEditor目录:/ewebeditor/
上传文件准备存放的目录:/uploads/
则"上传路径"应设为"../uploads/"
例2, 如您的系统目录结构如下:
eWebEditor目录:/ewebeditor/
上传文件准备存放的目录:/ewebeditor/uploads/
则"上传路径"应设为"uploads/"
l 显示路径
只有使用"相对路径模式",才有必要对此项进行设置。"显示路径"意指的是内容显示页文件所在的路径。如新闻系统有一个命名为"show.asp"文件的页面,此页面实现的是把数据库中指定记录的新闻标题及用编辑器编辑过的新闻内容读出,并显示给网站的浏览者。前面指的"显示路径"就是"show.asp"文件所在的路径。
注意:显示路径的设置必须以"/"开头。
例1, 如您的新闻系统目录结构如下:
/news/show.asp
则"显示路径"应设为"/news/"
例2, 如您的新闻系统目录结构如下:
/mysystem/mynews/shownews.asp
则"显示路径"应设为"/mysystem/mynews/"
l 内容路径
只有使用"相对路径模式",才有必要对此项进行设置。"内容路径"意指编辑的内容以HTML代码表示时,此时的路径格式。设置值应为相对路径形式。
例1, 如您的新闻系统的目录结构如下:
内容显示页路径: /news/show.asp
上传文件保存路径: /news/uploads/xxx.gif
则"内容路径"应设为"uploads/"
例2, 如您的新闻系统的目录结构如下:
内容显示页路径: /news/show.asp
上传文件保存路径: /uploads/xxx.gif
则"内容路径"应设为"../uploads/"
三种路径模式,都有其各自优势之处,具体看您的需要进行选择。
以下为路径模式选择一般规则,您可以根据自己的实际情况选择,不一定非得遵守以下规则:
l "绝对根路径模式":整站系统程序常用
如果上传文件保存目录,针对整个站点,是固定的,整个站点有多个应用系统,所有上传文件都保存于一个共用的目录中,此种情况,我们建议您使用"绝对根路径模式"。此种结构,只要上传文件目录不变,站点中所有的程序都可以任意移动,内容中的链接也不会失效。此种结构的好处在于,无论内容显示页在什么目录,您可以正确的链接到相应的文件。
l "相对路径模式":独立子系统常用
如果您的系统相对站点独立,各个系统都有自己的上传文件存放目录。此种情况,我们建议您使用"相对路径模式"。此种结构,在系统迁移时,只要把整个系统中的所有文件一起移动即可。但一个系统中的内容,如在其它系统中调用显示,可能会链接错误。
l "绝对全路径模式":邮件系统常用
当把编辑器集成在邮件系统发送内容表单中使用时,如果发送的内容中带有链接或图片等HTML格式的内容,其中的路径必须使用绝对全路径。这样收件人,收到的内容中的文件路径才不会出错,才能正常显示相应的图片等信息。
相对路径的参数设置是本配置的一个难点。为更好的说明使用相对路径模式时,各参数的设置方法,下面提供几个实例帮助您的理解。
例1: "应用系统目录"、"上传文件目录"、"eWebEditor目录",三个目录全部独立分开
计划目录结构:
eWebEditor所在目录: /ewebeditor/ewebeditor.htm
上传文件存放目录: /uploads/xxx.gif
内容显示页文件所在目录: /news/show.asp
相对路径模式的参数设置:
上传路径: ../uploads/
显示路径: /news/
内容路径: ../uploads/
例2: "上传文件目录"、"eWebEditor目录"都在"应用系统目录"中
计划目录结构:
eWebEditor所在目录: /news/ewebeditor/ewebeditor.htm
上传文件存放目录: /news/uploads/xxx.gif
内容显示页文件所在目录: /news/show.asp
相对路径模式的参数设置:
上传路径: ../uploads/
显示路径: /news/
内容路径: uploads/
例3:、"eWebEditor目录"独立,"上传文件目录"在"应用系统目录"中
计划目录结构:
eWebEditor所在目录: /ewebeditor/ewebeditor.htm
上传文件存放目录: /news/uploads/xxx.gif
内容显示页文件所在目录: /news/show.asp
相对路径模式的参数设置:
上传路径: ../news/uploads/
显示路径: /news/
内容路径: uploads/
上传文件类型及大小设置
l 图片文件类型及限制
允许上传的图片文件类型及每个图片文件大小允许的最大值。
此设置将作用于"Insert/Modify Image"对话框中的文件上传。
默认文件类型:gif, jpg, jpeg, bmp
默认最大限制:100KB
l Flash文件类型及限制
允许上传的Flash文件类型及每个Flash文件大小允许的最大值。
此设置将作用于"Insert Flash"对话框中的文件上传。
默认文件类型:swf
默认最大限制:100KB
l 媒体文件类型及限制
允许上传的媒体文件类型及每个媒体文件大小允许的最大值。
此设置将作用于"Insert Media"对话框中的文件上传。
默认文件类型:rm, mp3, wav, mid, midi, ra, avi, mpg, mpeg, asf, asx, wma, mov
默认最大限制:100KB
l 其它文件类型及限制
允许上传的其它文件类型及每个文件大小允许的最大值。
此设置将作用于"Insert File"对话框中的文件上传。
默认文件类型:rar, zip, exe, doc, xls, chm, hlp
默认最大限制:500KB
l 远程上传文件类型及限制
允许上传的远程文件类型及每个远程文件大小允许的最大值。
此设置将作用于"Upload External File"按钮图标功能。
默认文件类型:gif, jpg, jpeg, bmp
默认最大限制:100KB
缩略图及水印相关设置
l 图形处理组件
选择您想使用的图形处理组件,当前只有一种可选,预留以后扩充。
l 处理图形扩展名
系统只会对符合指定的扩展名的文件使用缩略图或水印功能。使用此设置,您可以只对bmp格式的图形使用缩略图或水印功能,而不对jpg格式的使用此功能。
l 缩略图使用状态
通过此设置控制缩略图功能的打开或关闭。有"on"和"off"可选。当为"off"时,与缩略图功能相关的其它设置都无效。
l 缩略图长度条件
当图形的宽度或高度大于指定的值时,才会使用缩略图功能。单位px。
l 缩略图生成长度
当图形文件满足缩略图生成条件时,由此处指定生成的缩略图的大小。如原图形的宽度大于高度,则生成缩略图的宽度为此处指定的值;如原图形的高度大于宽度,则生成缩略图的高度为此处指定的值。缩略图将按原图的宽高同比例缩小。单位px。
l 文字水印使用状态
有二种状态可选。
不使用: 不使用文字水印功能,所有其它与文字水印相关的参数设置无效
使用: 使用文字水印功能,注意填写文字水印相关的其它参数设置
l 文字水印启用条件
只有当上传图片的宽度和高度都大于此处的设置值时,文字水印功能才会触发,否则,即使上面启用了文字水印功能,也不会生成文字水印。单位px。
l 文字水印内容
当使用文字水印时,水印文字的内容。如:"版权所有…"。
l 文字水印字体颜色
当使用文字水印时,水印文字的颜色。以16进制形式表示颜色值,如黑色对应的是"000000"。
l 文字水印阴影颜色
当使用文字水印时,水印文字的阴影色。以16进制形式表示颜色值,如白色对应的是"FFFFFF"。
l 文字水印阴影大小
当使用文字水印时,水印文字的阴影大小。单位px,默认1px。
l 文字水印字体大小
当使用文字水印时,水印文字的字体大小。单位px,默认12px。
(注:PHP版与字体库有关,默认单位为pt,实际字体大小可以先设定一个值,看效果后再适当修改此值)
l 文字水印字体名称
当使用文字水印时,水印文字的字体名称。
(注:PHP版无此项设置,有“中文字体库及路径”的设置,见下面的说明)
l 文字水印位置
水印文字在图片上的位置。有以下几项可选:左上、左中、左下、中上、中中、中下、右上、右中、右下。分别对应9个常用的位置。
l 文字水印边距
有左右边距和上下边距可设。也可以理解为水平边距和垂直边距。
当文字水印位置设置为居左(左上、左中、左下),“左右边距”的设置表示为左边距;当文字水印位置设置为居右(右上、右中、右下),“左右边距”的设置表示为右边距。
当文字水印位置设置为居上(左上、中上、右上),“上下边距”的设置表示为上边距;当文字水印位置设置为居下(左下、中下、右下),“上下边距”的设置表示为下边距。
l 文字水印文字占位
水印文字实际在图片中所占有的宽和高。此设置由“文字水印内容”、“文字水印字体名称”、“文字水印字体大小”三项确定。当此三项都填好后,您可以点击此设置项右边的“检测宽高”来检测建议的设置值。如果检测到的设置值在实际的图片水印上表现不佳,可以手动微调。
l 图片水印使用状态
有二种状态可选。
不使用: 不使用图片水印功能,所有其它与图片水印相关的参数设置无效
使用: 使用图片水印功能,注意填写图片水印相关的其它参数设置
l 图片水印启用条件
只有当上传图片的宽度和高度都大于此处的设置值时,图片水印功能才会触发,否则,即使上面启用了图片水印功能,也不会生成图片水印。单位px。
l 图片水印位置
水印图片在图片上的位置。有以下几项可选:左上、左中、左下、中上、中中、中下、右上、右中、右下。分别对应9个常用的位置。
l 图片水印边距
有左右边距和上下边距可设。也可以理解为水平边距和垂直边距。
当图片水印位置设置为居左(左上、左中、左下),“左右边距”的设置表示为左边距;当图片水印位置设置为居右(右上、右中、右下),“左右边距”的设置表示为右边距。
当图片水印位置设置为居上(左上、中上、右上),“上下边距”的设置表示为上边距;当图片水印位置设置为居下(左下、中下、右下),“上下边距”的设置表示为下边距。
l 图片水印图片路径
当使用图片水印时,水印图片的路径。此路径为相对ewebeditor/asp/upload.asp(.aspx/.php/.jsp)文件的路径。建议您把水印图片放在ewebeditor/sysimage/目录中,如文件名为water.gif,则实际的路径是ewebeditor/sysimage/water.gif,在此设置输入框则填"../sysimage/water.gif"。
l 图片水印透明度
图片水印的透明效果设置。可填0至1间数值。
0表示全透明(即什么也看不见,不要设为此值)
1表示不透明(即您做的水印图片是什么样的,水印在上传图片上也是什么样的)
0.5表示半透明。
l 图片水印图片占位
水印图片实际在上传图片上所占有的宽和高。此设置由“图片水印图片路径”所指向的图片的宽高确定。当“图片水印图片路径”项填好后,您可以点击此设置项右边的“检测宽高”来检测建议的设置值。如果检测到的设置值在实际的图片水印上表现不佳,可以手动微调。
l 中文字体库及路径
此项只有在PHP版中有。如使用的是英文字体,此项不需设置。如您想使用的是中文字体,则请在此填入字体库的文件名及路径。此文件路径是相对ewebeditor/php/目录的路径。建议把字体库文件拷贝到ewebeditor/php/目录中,如文件名为" simkai.ttf",则在输入框中输入"simkai.ttf"即可。
3.5.4 工具栏管理
通过工具栏管理,您可以对编辑器工具栏区的工具栏个数、工具栏排序、每个工具栏上的按钮进行管理。
下面让我们来看一下"coolblue"样式的工具栏区效果,如下图:
在编辑器的工具栏区,我们把如上图中的一行定义为一个工具栏。这样在"coolblue"样式中,我们可以看到共有3个工具栏。每个工具栏上有多个功能按钮。
要设置此工具栏,我们可以按如下操作:
样式管理页中点击"coolblue"所在行右边的"工具栏"将进入以下工具栏管理页。
通过上图,我们可以看到,工具栏设置页与实际显示的效果是一一对应的。
在这里你可以随意的定制工具栏的个数及排序。排序号越小的工具栏,在实际的显示效果中将越靠上。
工具栏管理页,所具有的功能罗列如下:
l 新增工具栏
输入工具栏名及排序号,点"新增工具栏",则会在工具栏列表中增加一个工具栏。
l 修改工具栏
在工具栏列表中,直接输入想要修改的工具栏名或排序号,点修改。
l 删除工具栏
要删除某个工具栏,只要在指定工具栏所在行的右边点"删除"即可。
l 按钮设置
可以对指定工具栏上的按钮个数及排序进行设置。详见"工具栏按钮"管理章节
提示:在此管理页中的指的"工具栏名",只是为了在可视管理界面下便于区分记忆,此名称不会在编辑器中显示。
3.5.5 按钮管理
点击工具栏管理页中的"按钮设置"将进入按钮管理页。界面如下:
在按钮管理页的上方导航条中,有显示当前编辑的按钮所在的样式名,及所在的工具栏名,您可以通过此提示了解当前操作的对象,以避免设错。
我们还可以看到,在操作界面中有两个多行的下拉列表框(drop-down list)。左边为"可选按钮"下拉列表框,右边为"已选按钮"下拉列表框。
"可选按钮"下拉框中列出了所有可供选择的功能按钮,包括分隔线和工具栏头等。
"已选按钮"下拉框中列出了当前已被选择的功能按钮。
您可以通过点击中间的左右键头按钮实现功能按钮的选择与撤消,通过上下键头按钮实现已选按钮的排序。具体操作如下:
l 选择
先在左边"可选按钮"列表中点选您想要加入的功能按钮,然后点击"向右键头"按钮,此时在右边的"已选按钮"列表的最后一行将增加一行您刚才选择的功能按钮。
直接在"可选按钮"列表中双击选项,可以快速操作此功能。
l 撤消
先在右边"已选按钮"列表中点选您想要撤消的功能按钮,然后点击"向左键头"按钮,此时右边您选定的行的功能按钮将被删除。
直接在"已选按钮"列表中双击选项,可以快速操作此功能。
l 排序
先在"已选按钮"列表中选择需要移动顺序的选项,然后点击上下键头按钮,实现功能按钮的排序。
提示:在下拉列表中越向上的,在实际显示界面中越靠左。
l 保存
当"已选按钮"列表中的按钮个数及顺序都已按您的要求设置好后,点击"保存设置"按钮,则数据被保存入配置文件。如未点"保存设置",所有上面的操作不会被保存。
设置保存后,您就可以通过样式管理中的"预览"功能,预览您刚才的设置效果。如效果不好,再进入设置,直至达到最好效果为止。
提示:在此按钮管理页,我们还提供了一个按钮图标与名称的对照表,以方便您选择正确的功能按钮。
3.5.6 上传文件管理
在后台管理中,除了提供有主要的可视化样式配置功能外,还提供了上传文件管理功能。
通过这里您可以对编辑器上传文件目录中的文件进行管理,包括浏览、删除、清空功能。
点击左边框架导般页的"上传文件管理",进入上传文件管理页,界面如下:
由于每个样式可以设置不同的文件上传目录,所以在此有一个"选择样式目录"的下拉列表选项。选择其中的一个样式后,页面将会显示列出此目录所有的文件列表。以下为对列表的操作:
l 浏览
点击列表中的"文件地址",将会弹出新窗口,并指向此文件。
l 删除选定的文件
先选择列表行右边的选择框,可多选,然后点"删除选定的文件"按钮。则选定的文件被删除。
l 清空所有文件
直接点此按钮将清空指定样式目录下的所有文件,请注意操作。
3.5.7 修改用户名及密码
为了系统安全上的考虑,后台管理需要管理员使用用户名及密码进行登录。初始的设置都是:
用户名:admin
密码:admin
我们强列建议您在系统正式使用后,修改用户名及密码,以防止黑客使用初始的用户名及密码进行登录,并修改了你的配置,导致您站点或系统的不安全。
用户名及密码信息,存放于服务器端配置文件中,当忘记时可从下列文件中找回:
(ASP版): ewebeditor/asp/config.asp
(.NET版): ewebeditor/aspx/config.aspx
(PHP版): ewebeditor/php/config.php
(JSP版): ewebeditor/jsp/config.jsp
提示:当您把所以配置设置好后,您可以把ewebeditor/admin目录删除,不影响eWebEditor的正常使用。这样您完全不用担心,此后台程序有可能给您的站点或系统带来的不安全。
3.6 JavaScript API
您可能经常需要在调用编辑器那个网页中访问或处理编辑器的内容。
eWebEditor提供了基于JavaScript语言的客户端API,使您可以方便的完成您想要的操作。
3.6.1 API调用方法
在使用API之前,您需要指定您想访问或处理的编辑器的名称,这是由于eWebEditor是允许多实例化的,即一个表单或一个网页中可能有多个编辑器存在。
下面是标准的调用方法示例:
<textarea name="content1" style="display:none"></textarea> <iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> |
如上,您有一个名字为“eWebEditor1”的框架(IFRAME)用于编辑器的调用,您可以如下访问API的方法:
eWebEditor1.<API method>
例(取值)
var html = eWebEditor1.getHTML();
注意:请尽量不要使用此用户手册中未提供的函数,以免发生错误。更多的接口函数会在未来的升级版本中不断提供。
注意:JavaScript语言是区分大小写的,请保证书写正确。
3.6.2 getHTML
描述
返回编辑器的HTML代码内容
语法
variable = object.getHTML();
示例
下面的示例演示了获取名为“myEditor”编辑器的内容的方法:
var html = myEditor.getHTML(); |
执行上面代码后,变量“html”已包含当前编辑器所编辑的所有HTML代码内容。
3.6.3 getText
描述
返回编辑器的纯文本内容,纯文本即不含任何的HTML代码,但含有换行、空格、TAB等。
语法
variable = object.getText();
示例
下面的示例演示了获取名为“myEditor”编辑器的纯文本内容的方法:
var text = myEditor.getText(); |
执行上面代码后,变量“text”已包含当前编辑器所编辑的内容的纯文本内容。
3.6.4 getCount
描述
返回编辑器内容的字数统计。
语法
variable = getCount(int nType);
参数
这唯一的参数是一个表示获取字数统计的类型,数字型。必需是下面四个值之一:
0: 统计英文字数
1: 统计中文字数
2: 统计中文和英文的字数,1个中文按加1计算
3: 统计中文和英文的字数,1个中文按加2计算
例:
这下面的方法演示了获取名为“myEditor”的编辑器内的内容字数。
假设当前编辑的内容是“Ab中国人”。
var n = myEditor.getCount(0); //返回 n=2 var n = myEditor.getCount(1); //返回 n=3 var n = myEditor.getCount(2); //返回 n=5 var n = myEditor.getCount(3); //返回 n=8 |
3.6.5 setHTML
描述
设置编辑器的内容,覆盖原有内容
语法
object.setHTML(string html);
参数
这唯一的参数是一个表示您要设置的HTML代码内容的字符串。
示例:
这下面的代码演示了通过客户端代码如何设置名为“myEditor”的编辑器的内容。
myEditor.setHTML('The code I want to set'); |
3.6.6 insertHTML
描述
在当前光标所在位置插入HTML代码内容
语法
object.insertHTML(string html);
参数
这唯一的参数是一个表示您要插入的HTML代码内容的字符串。
示例:
这下面的代码演示了在名为“myEditor”的编辑器的光标所在位置插入内容:
myEditor.insertHTML('The code I want to insert'); |
3.6.7 appendHTML
描述
在编辑器的末尾追加HTML代码
语法
object.appendHTML(string html);
参数
这唯一的参数是一个表示您要追加的HTML代码内容的字符串。
示例:
这下面的代码演示了在名为“myEditor”的编辑器的内容尾追加内容:
myEditor.appendHTML('The code I want to append'); |
3.6.8 setMode
描述
切换编辑区到指定的编辑模式。
语法
object.setMode(string newMode);
参数
这唯一的参数是一个表示编辑器状态的字符串。必需是下面四个值之一:
"CODE": HTML源代码编辑模式
"EDIT": 可视编辑模式
"TEXT": 纯文本编辑模式
"VIEW": 预览模式
例:
这下面的方法演示了把名为‘myEditor’的编辑器切换到预览模式。
myEditor.setMode('VIEW'); |
3.6.9 remoteUpload
描述
上传远程文件到本地服务器。并把远程文件相关的路径,全部改为本地路径。
远程文件指的是非自己WEB服务器上文件,如您的站点是www.yoursite.com,内容中一个<img src=http://www.othersite.com/xxx.gif,则此图片文件为远程文件,经远程文件上传后,内容中的图片路径变成本地形式,如:<img src=../xxx.gif>
语法
object.remoteUpload(string strEventUploadAfter);
参数
唯一的参数指定的是上传完成后,程序接着执行的事件。如果上传完无需执行其它事件,可以为空。
注
此函数如果在表单提交时执行,请把此函数放在所有表单有效性检测之后。如果一个表单中有多个编辑器,你可以通过对象名指定某个编辑区的内容上传。
例:
这下面的例子演示了名为‘myEditor’的编辑器执行了远程上传,然后提交表单。
myEditor.remoteUpload ("doSubmit()"); function doSubmit(){ document.myform.submit(); } |
完整的实例,请见代码实例章节。
3.7 国际化
3.7.1 多语言概述
eWebEditor采用国际化的UTF-8字符集的多语言处理方式,完全支持所有的语言。您即可以把eWebEditor集成到单一语言的应用程序中,也可以把eWebEditor集成到您多语言的应用系统中。
同时实现多语言的界面及功能,无需安装多个eWebEditor,只需安装一个即可。
多语言界面应用于编辑器的工作区,工具栏,对话框,右键菜单,服务器端程序处理等。
eWebEditor的多语言处理中,除了可以根据不同国家语言设定不同语言字符,还可以根据不同国家语言设定最佳的语言字符显示效果。如每种语言的对话框文字或菜单文字的默认字体名称,字体大小等可以根据不同国家语言在语言包中进行设置。
eWebEditor的对话框可以根据不同国家语言的字符长度不同,根据语言包的设定,自动调整对话框的大小,以展现给最终用户最佳的显示效果。
eWebEditor当前提供了四个语言包:英语、德语、简体中文、繁体中文。更多语言,您只需要自己对照翻译,并按下面章节的介绍,加入即可。
3.7.2 增加一种语言
eWebEditor的一个语言包,包括一个定义语言字符的langugecode.js文件和一个定义语言默认界面样式的languagecode.css文件,这些文件存放于ewebeditor/language/目录中。
如果在我们提供的语言包中,没有您所需要的语言包,你可以通过如下的步骤自己增加一套语言包。
3.7.2.1 查找语言代码
从下面的语言代码与国家对照表中找到自己的需要增加的语言代码。
Language Code | Language/Country |
af | Afrikaans |
sq | Albanian |
ar-sa | Arabic (Saudi Arabia) |
ar-iq | Arabic (Iraq) |
ar-eg | Arabic (Egypt) |
ar-ly | Arabic (Libya) |
ar-dz | Arabic (Algeria) |
ar-ma | Arabic (Morocco) |
ar-tn | Arabic (Tunisia) |
ar-om | Arabic (Oman) |
ar-ye | Arabic (Yemen) |
ar-sy | Arabic (Syria) |
ar-jo | Arabic (Jordan) |
ar-lb | Arabic (Lebanon) |
ar-kw | Arabic (Kuwait) |
ar-ae | Arabic (U.A.E.) |
ar-bh | Arabic (Bahrain) |
ar-qa | Arabic (Qatar) |
eu | Basque |
bg | Bulgarian |
be | Belarusian |
ca | Catalan |
zh-tw | Chinese (Taiwan) |
zh-cn | Chinese (PRC) |
zh-hk | Chinese (Hong Kong SAR) |
zh-sg | Chinese (Singapore) |
hr | Croatian |
cs | Czech |
da | Danish |
nl | Dutch (Standard) |
nl-be | Dutch (Belgium) |
en | English |
en-us | English (United States) |
en-gb | English (United Kingdom) |
en-au | English (Australia) |
en-ca | English (Canada) |
en-nz | English (New Zealand) |
en-ie | English (Ireland) |
en-za | English (South Africa) |
en-jm | English (Jamaica) |
en | English (Caribbean) |
en-bz | English (Belize) |
en-tt | English (Trinidad) |
et | Estonian |
fo | Faeroese |
fa | Farsi |
fi | Finnish |
fr | French (Standard) |
fr-be | French (Belgium) |
fr-ca | French (Canada) |
fr-ch | French (Switzerland) |
fr-lu | French (Luxembourg) |
gd | Gaelic (Scotland) |
gd-ie | Gaelic (Ireland) |
de | German (Standard) |
de-ch | German (Switzerland) |
de-at | German (Austria) |
de-lu | German (Luxembourg) |
de-li | German (Liechtenstein) |
el | Greek |
he | Hebrew |
hi | Hindi |
hu | Hungarian |
is | Icelandic |
id | Indonesian |
it | Italian (Standard) |
it-ch | Italian (Switzerland) |
ja | Japanese |
ko | Korean |
ko | Korean (Johab) |
lv | Latvian |
lt | Lithuanian |
Macedonian | (FYROM) |
ms | Malaysian |
mt | Maltese |
no | Norwegian (Bokmal) |
no | Norwegian (Nynorsk) |
pl | Polish |
pt-br | Portuguese (Brazil) |
pt | Portuguese (Portugal) |
rm | Rhaeto-Romanic |
ro | Romanian |
ro-mo | Romanian (Moldavia) |
ru | Russian |
ru-mo | Russian (Moldavia) |
sz | Sami (Lappish) |
sr | Serbian (Cyrillic) |
sr | Serbian (Latin) |
sk | Slovak |
sl | Slovenian |
sb | Sorbian |
es | Spanish (Spain ? Traditional) |
es-mx | Spanish (Mexico) |
es | Spanish (Spain ? Modern) |
es-gt | Spanish (Guatemala) |
es-cr | Spanish (Costa Rica) |
es-pa | Spanish (Panama) |
es-do | Spanish (Dominican Republic) |
es-ve | Spanish (Venezuela) |
es-co | Spanish (Colombia) |
es-pe | Spanish (Peru) |
es-ar | Spanish (Argentina) |
es-ec | Spanish (Ecuador) |
es-cl | Spanish (Chile) |
es-uy | Spanish (Uruguay) |
es-py | Spanish (Paraguay) |
es-bo | Spanish (Bolivia) |
es-sv | Spanish (El Salvador) |
es-hn | Spanish (Honduras) |
es-ni | Spanish (Nicaragua) |
es-pr | Spanish (Puerto Rico) |
sx | Sutu |
sv | Swedish |
sv-fi | Swedish (Finland) |
th | Thai |
ts | Tsonga |
tn | Tswana |
tr | Turkish |
uk | Ukrainian |
ur | Urdu |
ve | Venda |
vi | Vietnamese |
xh | Xhosa |
ji | Yiddish |
如果是同一语系的不同国家,可以选择此语系公用的语言代码。如"en-us", "en-gb",您可以统一使用"en",程序在未找到"en-us"或"en-gb"语言包时,程序将自动用"en"语言包来代替。
3.7.2.2 增加语言字符文件
语言字符文件存放于ewebeditor/language/目录,是以"语言代码"+".js"格式命名的文件。文件名全部小写,如英文为: "en.js", 简体中文为: "zh-cn.js"。
您可以通过拷贝一个系统自带的语言字符文件,并粘贴重命名为"YourLanguageCode.js",来快速的新建一个语言字符文件。然后用记事本或其它的文本编辑打开此文件,把其中的语言字符串全部替换为自己的语言字符串,然后保存。
注意:语言字符文件,一定要以"UTF-8"格式保存。如:记事本的"另存为"对话框中,"编码"项默认为"ANSI",请选择"UTF-8",然后点"保存"。
3.7.2.3 增加语言样式文件
语言样式文件存放于ewebeditor/language/目录,是以"语言代码"+".css"格式命名的文件。文件名全部小写,如英文为: "en.css", 简体中文为: "zh-cn.css"。
语言样式文件主要用于定义每种语言的界面、对话框、右键菜单等,默认的字体大小和字体名称。
如英文最佳的界面字符大小为8pt,而中文最佳的界面字符大小为9pt。
3.7.2.4 修改支持语言选项
增加了语言字符文件及语言样式文件之后,你必须修改系统的部分代码,使其能调用刚才增加的语言包。
有两处代码需要修改,一个是客户端检测的选项增加,一个是服务器端的可视配置选项增加。
1. 客户端检测选项的增加
用记事本或其它文本编辑工具,打开ewebeditor/js/lang.js文件,找到如下代码:
var AvailableLangs = new Object() ; AvailableLangs["en"] = true ; AvailableLangs["zh-cn"] = true ; AvailableLangs["zh-tw"] = true ; |
在这代码片段后增加如下一行即可:
AvailableLangs["yourlanguagecode"] = true ; |
注:蓝色部分为你在语言代码和国家对应表中找到的语言代码。
2. 服务器端的可视配置选项增加
用记事本或其它文本编辑工具,打开ewebeditor/admin/style.asp(.aspx/.php/.jsp)文件,找到如下代码:
ASP/ASP.NET:
s_FormDefaultLanguage = InitSelect("d_defaultlanguage", Split("Simplified Chinese|Traditional Chinese|English ", "|"), Split("zh-cn|zh-tw|en", "|"), sDefaultLanguage, "", "") |
PHP:
$s_FormDefaultLanguage = InitSelect("d_defaultlanguage", explode("|", "Simplified Chinese|Traditional Chinese|English "), explode("|", "zh-cn|zh-tw|en"), $GLOBALS["sDefaultLanguage"], "", ""); |
JSP:
s_FormDefaultLanguage = GetSelect("d_defaultlanguage", split("Simplified Chinese|Traditional Chinese|English ", "|"), split("zh-cn|zh-tw|en", "|"), sDefaultLanguage, ""); |
您只要改动上面蓝色部分的代码,分别加入语言描述及语言代码即可。多个选项以"|"分隔。修改完后保存。
3.7.2.5 完成
通过上面几个步骤,至此,您的语言包已经增加完成!
3.7.3 定制语言的字体选项
eWebEditor可以根据不同的语言,使用不同的字体名称下拉选项,完全可以使用只有某种语言才具有的字体名称。
对话框或工具栏中字体名称的定义是存在语言字符定义文件中的,如下形式:
ewebeditor/language/languagecode.js
在这页代码中,你可以看到lang["FontName"]的定义,如下:
lang["FontName"] = "<option value='Arial'>Arial</option><option value='Arial Black'>Arial Black</option><option value='Arial Narrow'>Arial Narrow</option><option value='Brush Script MT'>Brush Script MT</option><option value='Century Gothic'>Century Gothic</option><option value='Comic Sans MS'>Comic Sans MS</option><option value='Courier'>Courier</option><option value='Courier New'>Courier New</option><option value='MS Sans Serif'>MS Sans Serif</option><option value='Script'>Script</option><option value='System'>System</option><option value='Times New Roman'>Times New Roman</option><option value='Verdana'>Verdana</option><option value='Wide Latin'>Wide Latin</option><option value='Wingdings'>Wingdings</option>" |
直接在此增加或修改您想要的字体选项即可。
3.7.4 多语言处理注意事项
l 修改定制注意事项
在修改代码时,客户端文件,如.js, .css, .htm等保存时,一定得以"UTF-8"格式保存。
l 集成注意事项
在与您的应用系统集成时,由于我们使用的"UTF-8"格式的编码,请尽量规范你的代码书写,在你的服务器端脚本文件中指明页面的CodePage属性。以保证代码正确,不会产生乱码。
3.8 代码实例
以下代码实例,都打包在ewebeditor/_example/目录中。您可以通过直接运行实例,来查看实际效果。
通过以下地址访问例子首页,可以快速导航到各例子文件:
http://www.yoursite.com/ewebeditor/_example/default.asp(.aspx/.php/.jsp)
有例子目录中,包括的实例代码有:
l 标准调用示例
l 弹窗调用未例
l 远程文件自动上传示例
l 客户端API示例
l 上传文件接口示例
l 外部样式引用接口示例
l 表单接收示例
3.8.1 标准调用
此例演示了eWebEditor的标准调用方法,也是最常用的调用方法。
要正常使用此代码,请把代码中的"ewebeditor.htm"文件的路径定位到eWebEditor实际的存放的路径。
此例打包在系统的压缩包例子目录中: _example/standard.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 标准调用示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 标准调用示例</b></p> <p>本样式为系统默认样式(coolblue),最佳调用宽度550px,高度350px!</p>
<FORM method="post" name="myform" action="retrieve.asp"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <INPUT type="hidden" name="content1" value=""> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> </TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |
3.8.2 弹窗调用
此例演示了eWebEditor的弹窗调用方法,当页面中表单的元素较多时,此方法可以使页面更加整洁,并加快表单页的加载速度。
要正常使用此代码,请把代码中的"popup.htm"文件的路径定位到eWebEditor实际的存放的路径。
此例打包在系统的压缩包例子目录中: _example/popup.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 弹窗调用示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 弹窗调用示例</b></p> <p>当页面中表单的元素较多时,此方法可以使页面更加整洁,并加快表单页的加载速度。</p> <p>点击"HTML Editor"按钮,在弹出窗口编辑一些内容,然后点"保存返回"按钮,看一下效果。</p>
<Script Language=JavaScript> function eWebEditorPopUp(form, field, width, height) { window.open("../popup.htm?style=popup&form="+form+"&field="+field, "", "width="+width+",height="+height+",toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no"); } </Script>
<TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <FORM ACTION="retrieve.asp" METHOD="post" NAME="myform"> <TEXTAREA NAME="myField" COLS="50" ROWS="10" style="width:550px"><i>eWebEditor 弹窗调用示例</i></TEXTAREA><br> <INPUT TYPE="BUTTON" NAME="btn" VALUE="HTML Editor" ONCLICK="eWebEditorPopUp('myform', 'myField', 580, 380)"> </FORM> </TD> </TR> <TR> <TD align=right colspan=2> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> </TABLE>
</BODY> </HTML> |
3.8.3 远程文件自动上传
此例演示了如何利用eWebEditor提供的Client API实现远程文件自动上传。
要正常使用此代码,请把代码中的"ewebeditor.htm"文件的路径定位到eWebEditor实际的存放的路径。
此例打包在系统的压缩包例子目录中: _example/remote.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 远程文件自动上传示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 远程文件自动上传示例</b></p> <p>演示操作说明:</p> <ul> <li>编辑区中的图片地址为:http://www.ewebeditor.net/images/ewebeditor.gif <li>点击按钮<img src="../buttonimage/blue/remoteupload.gif">,然后转到“代码”模式看一下,编辑区的图片的地址已经到本地服务器了 <li>或点此表单的“提交”,提交后,用IE的"查看源文件"看一下,图片的地址也到本地服务器了 </ul>
<script language=javascript> // 表单提交检测 function doCheck(){ // 检测表单的有效性 // 如:标题不能为空,内容不能为空,等等.... if (eWebEditor1.getHTML()=="") { alert("内容不能为空!"); return false; }
// 表单有效性检测完后,自动上传远程文件 // 函数:remoteUpload(strEventUploadAfter) // 参数:strEventUploadAfter ; 上传完后,触发的函数名,如果上传完后不需动作可不填参数 eWebEditor1.remoteUpload("doSubmit()"); return false; }
// 表单提交(当远程上传完成后,触发此函数) function doSubmit(){ document.myform1.submit(); } </script>
<FORM method="post" name="myform" action="retrieve.asp" οnsubmit="return doCheck();"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <INPUT type="hidden" name="content1" value="<IMG src="http://www.ewebeditor.net/images/ewebeditor.gif">"> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=full" frameborder="0" scrolling="no" width="550" height="400"></IFRAME> </TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |
3.8.4 客户端API
此例演示了如何利用eWebEditor提供的Client API实现在客户端与编辑器的交互。
要正常使用此代码,请把代码中的"ewebeditor.htm"文件的路径定位到eWebEditor实际的存放的路径。
此例打包在系统的压缩包例子目录中: _example/clientapi.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 客户端API示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 客户端API示例</b></p> <p>您可以用eWebEditor提供的客户端API,对编辑器执行高级操作。更多API,请参见开发手册。</p>
<FORM method="post" name="myform" action="retrieve.asp"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <INPUT type="hidden" name="content1" value="<p>eWebEditor - Advanced online browser based HTML Editor.</p>"> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> </TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> <TR> <TD>HTML:</TD> <TD><TEXTAREA cols=50 rows=5 id=myTextArea style="width:550px"></TEXTAREA></TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=button value="getHTML" οnclick="myTextArea.value=eWebEditor1.getHTML()"> <INPUT type=button value="setHTML" οnclick="eWebEditor1.setHTML('<b>Hello My World!</b>')"> <INPUT type=button value="insertHTML" οnclick="eWebEditor1.insertHTML('This is insertHTML function!')"> <INPUT type=button value="appendHTML" οnclick="eWebEditor1.appendHTML('This is appendHTML function!')"> <br> <INPUT type=button value="Source Mode" οnclick="eWebEditor1.setMode('CODE')"> <INPUT type=button value="Edit Mode" οnclick="eWebEditor1.setMode('EDIT')"> <INPUT type=button value="Text Mode" οnclick="eWebEditor1.setMode('TEXT')"> <INPUT type=button value="Preview Mode" οnclick="eWebEditor1.setMode('VIEW')"> </TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |
3.8.5 上传文件接口
此例演示了如何使用上传文件接口参数,参数包括:originalfile, savefilename, savepathfilename。
此例打包在系统的压缩包例子目录中: example/parafile.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 上传文件接口示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 上传文件接口示例</b></p> <p>通过使用这个接口功能,您可以获取到所有通过编辑器上传的图片或文件的文件名及路径。</p> <p>在编辑器中上传一个文件或图片,看一下效果。</p>
<Script Language=JavaScript> function doChange(objText, objDrop){ if (!objDrop) return; var str = objText.value; var arr = str.split("|"); objDrop.length=0; for (var i=0; i<arr.length; i++){ objDrop.options[i] = new Option(arr[i], arr[i]); } } </Script>
<FORM method="post" name="myform" action="retrieve.asp"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <INPUT type="hidden" name="content1" value=""> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue&originalfilename=myText1&savefilename=myText2&savepathfilename=myText3" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> </TD> </TR> <TR> <TD>parameter:originalfilename</TD> <TD><input type=text id=myText1 style="width:200px" οnchange="doChange(this,myDrop1)"> <select id=myDrop1 size=1 style="width:200px"></select></TD> </TR> <TR> <TD>parameter:savefilename</TD> <TD><input type=text id=myText2 style="width:200px" οnchange="doChange(this,myDrop2)"> <select id=myDrop2 size=1 style="width:200px"></select></TD> </TR> <TR> <TD>parameter:savepathfilename</TD> <TD><input type=text id=myText3 style="width:200px" οnchange="doChange(this,myDrop3)"> <select id=myDrop3 size=1 style="width:350px"></select></TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |
3.8.6 外部样式接口
此例演示了如何使用外部样式引用接口。以实现编辑区与应用系统样式的统一。
此例打包在系统的压缩包例子目录中: example/para_extcss.asp(.php/.aspx/.jsp)
<HTML> <HEAD> <TITLE>eWebEditor : 外部样式引用方法示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> body,td,input,textarea {font-size:8pt; font-family:Verdana, Arial, Helvetica} </style> </HEAD> <BODY>
<p><b>Navigator : <a href="default.asp">Home</a> > 外部样式引用方法示例</b></p> <p>通过使用外部样式参数接口,你可以指定编辑区的样式。</p> <p>常用于把编辑区的样式设置为与你的应用系统相同的CSS样式文件,这样保证了编辑器中显示的效果与您的应用系统中输出显示的效果完全相同。</p> <p>下面的例子,指定extcss=_example/myeditorarea.css,你可以在编辑区中输入一些文字看看,表现效果与myeditorarea.css中定义的是相同的。</p>
<FORM method="post" name="myform" action="retrieve.asp"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>Content:</TD> <TD> <INPUT type="hidden" name="content1" value=""> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue&extcss=_example/myeditorarea.css" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> </TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="Submit"> <INPUT type=reset value="Reset"> <INPUT type=button value="View Source" οnclick="location.replace('view-source:'+location)"> </TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |
3.8.7 表单接收
请确认eWebEditor已放在一个表单(form)中。
当此表单提交时,获取eWebEditor的值,就如获取普通的多行文本输入框<textarea>相同。
此例演示了如何接收到表单提交过来的HTML代码,并显示它。
此例打包在系统的压缩包例子目录中: _example/retrieve.asp(.php/.aspx/.jsp)
ASP:
<% Dim sContent, i For i = 1 To Request.Form("content1").Count sContent = sContent & Request.Form("content1")(i) Next Response.Write "Content:<br><br>" & sContent %> |
PHP:
<?php echo "Conent:<br><br>".stripslashes($_POST["content1"]); ?> |
JSP:
<% String sContent1 = request.getParameter("content1"); out.println("Content:<br><br>" + sContent1); %> |
ASP.NET (VB.NET)
<% Dim sContent1 sContent1 = Request.Form("content1") Response.Write ("Content:<br><br>" & sContent1) %> |
3.9 服务器端函数参考
在这里提供了一些服务器端各语言版本的函数,这些函数与eWebEditor集成开发有一定的关系。
所有提供的函数,只是一个范例,仅供参考,没有强制必须使用。
3.9.1 JSP
3.9.1.1 htmlEncode
此函数的功能与其它环境的以下函数相似:
(ASP/ASP.net): Server.HTMLEncode()
(PHP): htmlspecialchars()
此函数在修改内容时经常用到。当您想把已经保存在数据库中的内容取出,并置于编辑器中,实现内容的修改时,您需要先对HTML格式编码,然后再指定<textarea>的初始值。
函数代码如下:
<%! static String htmlEncode(int i){ if (i=='&') return "&"; else if (i=='<') return "<"; else if (i=='>') return ">"; else if (i=='"') return """; else return ""+(char)i; }
static String htmlEncode(String st){ StringBuffer buf = new StringBuffer(); for (int i = 0;i<st.length();i++){ buf.append(htmlEncode(st.charAt(i))); } return buf.toString(); } %> |
使用例子:
注意下面蓝色部分,表求给编辑器赋值。变量str指从数据库中取出的HTML格式的初始值。
<textarea name="content1" style="display:none"><%=htmlEncode(str)%></textarea> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> |
3.10 常见问题及解答
问:我不会任何HTML语法及没有任何主页制作经验,能用好这个编辑器吗?
答:绝对没有任何问题,因为编辑器是完全所见即所得的,所以HTML语法都在后台自动生成。至于使用方面,本编辑器也尽量做到简单易用,相信您能在短时间内学会使用这个功能强大的编辑器的。
问:与普通文本输入框相比,HTML编辑器有什么优势之处?
答:最大的优势就是让使用者更方便快捷地编写出各种不同样式及效果的HTML内容,以往普通文本输入框要实现这些HTML效果的内容就需要使用者具备一定的HTML语法或UBB语法,而且编写内容的时候是手工编写代码方式的,除了不直观以外,还经常出现编写好内容并输出后才发现效果不理想等情况。而使用HTML编辑器则完全杜绝了这些情况的发生。
问:为什么我无法使用编辑器的部分或全部功能?
答:因为编辑器使用了JAVASCRIPT客户端语言,如果浏览器不支持JAVASCRIPT或关闭了这个功能的话,编辑器就不能正常工作了。另外,编辑器还需要使用者的浏览器版本是IE5.5以上,否则编辑器同样不能正常工作。
问:为什么我在修改内容的时候有些内容会跑出编辑区?
答:因为内容都是以HTML格式保存的,如果你在赋值的时候没有对内容进行字符转换,则会以HTML格式进行解释,所以请一定在赋值时加入HTMLEncode()函数。如:
(ASP版)
<textarea name=content><%=Server.HTMLEncode(str)%></textarea>
(PHP版)
<textarea name=content><?=htmlspecialchars($str)?></textarea>
问:我的程序放在一般的虚拟主机上,没有FSO或上传组件支持,能使用上传功能吗?(ASP版)
答:可以。因为eWebEditor上传功能的实现可以使用无组件文件上传类,所以无需上传组件的支持也能正常使用上传功能。
问:我转原来系统的在线编辑为eWebEditor时,为什么显示出来都是HTML格式源代码?
答:因为很多现有的系统使用的都是UBB之类的编码,都有进行字符转换,有可能在保存或显示页,你把保存或显示页的所有字符转换函数去掉就可以了,因为eWebEditor存的就是HTML格式的代码。
问:为什么我编辑的内容都会多一个逗号?(ASP版)
答:因为内容超过100K时,eWebEditor有自动文件截取功能,使得大的文件内容也能提交,突破microsoft的表单限制。所以请定保证使用下面的形式接收提交来的数据:
<%
For i = 1 To Request.Form("content1").Count
sContent = sContent & Request.Form("content1")(i)
Next
%>
问:为什么不能上传超过200K的文件?(win2003平台)
答:win2003的IIS 6.0对asp的上传文件大小为200k限制,aspx的上传程序没有影响。在IIS6.0中,默认设置是特别严格和安全的,最大只能传送 204,800 个字节,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击。IIS 6 出于安全考虑, 默认最大请求是200K(也即最大提交数据限额为200KByte,204800Byte)。(在 IIS 6.0 之前的版本中无此限制)。
解决办法:
1. 停止 IIS Admin Service 服务
2. 打开 /Windows/system32/inesrv/metabase.xml
3. 修改 ASPMaxRequestEntityAllowed 的值为自己需要的, 默认为 204800
4. 启动 IIS Admin Service
4 联系我们
4.1 服务说明
如果您在使用中运到问题,请先查看我们的用户手册,可能问题可以马上解决。
为了能给您提供更好的服务,请在提交问题时遵守下列规则:
l 准确:不要提象“你的产品有问题”这样的问题,要尽量的表达准确,请写出发生错误的现象或者程序代码片段等与问题相关的信息。
l 简练:把您问题的特征描述尽量只要写成几个简单的句子,尽量限制附加很多的代码,如不要把一个完整程序每个页面的代码都附加进来。
l 耐心:因为我们要回答的问题可能较多,所以您的问题得到回复可能需要几分钟、几小时、甚至几天,请耐心等待。
4.2 联系我们
您在使用我们的产品时,遇到问题寻求技术支持解决,或者您找到程序的bug要报告,都请随时与我们联系。电子邮件、QQ在线、电话技术支持只对商业付费用户开放。
以下联系方式,只提供eWebEditor相关业务咨询及商业付费用户的技术支持。不提供未付费用户的技术支持服务。
公司:福州极限软件开发有限公司
地址:福建省福州市长乐中路296号集友大厦18G
邮编:350011
电话:(0591)83633592
传真:(0591)83633593
QQ:589808
网站:http://www.eWebSoft.com (极限软件公司站点)
http://www.eWebEditor.net (eWebEditor中文站)
http://www.eWebEditor.com (eWebEditor英文站)