基于Java Web的HTML在线文本编辑器解决方案
摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国内外开发者的亲睐。
在Java Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能,因此掌握FckEditor在Java Web开发环境下的配置过程也是开发者必备的技能之一。
关键词:Jsp;FckEditor;HTML;在线文本编辑器
2基于Java Web 的HTML在线编辑器解决方案
著名的开源网页编辑软件FCKEditor在09年发布至现在已经更新到3.0版本,FckEditor由于其资源轻量化、配置简单、免费开源、文本编辑功能齐全、支持多浏览器、支持PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言的强大优势,受到众多开发者亲睐。
目前,众多的Java Web 项目中FckEditor成为开发者对在线编辑器的首选,为网络文本交互提供文本样式编辑、图片上传下载和附件上传下载的功能。
3FckEditor编辑器在Java Web开发中的配置
3.1开发环境和FckEditor配置文件
(1)开发环境:MyEclipse7.5 ,JDK1.6 ,tomcat6.0;
(2)FckEditor配置文件:FckEditor2.6.6,FckEditor java demo 2.6;
3.2FckEditor在Java Web中的基本配置
(1)在MyExclipse文件下建设Java Web项目FckEditor。
(2)解压FckEditor_2.6.6.zip文件,将解压后的根目录下的FckEditor文件夹拷贝到SSH框架项目下的WebRoot目录里;
(3)将下载FckEditor java demo 2.6文件解压后,把根目录下Web INF中的lib里5个.jar文件:commons fileupload 1.2.1.jar、commons io 1.3.2.jar、FckEditor java core 2.4.jar、slf4j api 1.5.2.jar及slf4j simple 1.5.2.jar 拷贝到SSH框架项目下的Web INF目录中的lib目录里。
(4)将FckEditor java demo 2.6文件下的WebRoot目录下的index.jsp 文件和showdata.jsp拷贝到SSH框架项目下的WebRoot目录下。
以上4步完成后的SSH框架项目如图1所示。
上传文件或附件的路径及存放文件的文件夹名,可根据项目需要自行设定
3.3实现文本样式编辑、图片上传和附件上传下载
(1)在SSH框架项目的src目录下新建文件FckEditor.properties,并添加如下内容:
//FckEditor的基本设置
erFilesPath=/UpFiles
erActionImpl=erActi onImpl
//上传下载文件的业务处理类,一般无需修改,按默认方式处理
connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|t xt|doc|wma|wmv|mp3|flv|swf|xls|
//上传附件文件的类型限制,可根据项目需要自行删增
connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|f lv|swf|
//上传媒体文件的类型限制,可根据项目需要自行删增
connector.resourceType.image.extensions.allowed=|jpg|png|gif|//允许上传的图片文件类型,可根据项目需要自行删增
connector.resourceType.flash.extensions.allowed=|swf|
//允许上传的媒体文件类型,可根据项目需要自行删增
FckEditor.basePath=/FckEditor
//FckEditor的配置文件存放路径,此处要和项目中实际存放的路径保持一致
添加完成后保存。
(2)根据第1步的配置文件要求,在SSH项目的WebRoot目录下新建文件夹UpFiles,在UpFiles根目录先新建4个文件夹一次命名为image、files、flash、media,用来分类存放上传的附件。
完成以上两个步骤后效果如图2所示。
图1SSH框架项目图2效果
(3)修改index.jsp文件中的script脚本,在里面添加如下内容,并且设置FckEditor的框架大小,可根据需要自行设定。
oFckEditor.Height='400';
oFckEditor.Width='800';
(4)在SSH项目下Web INF目录的Web.xml文件中配置一下内容,启动上传、下载业务处理类,以及文件上传所需的配置文件路径。
<servlet>
<servlet name>Connector</servlet name>
<servlet
class>net.FckEditor.connector.ConnectorServlet</servlet class> <load on startup>1</load on startup>
</servlet>
<servlet mapping>
<servlet name>Connector</servlet name>
<url pattern>/FckEditor/editor/filemanager/connectors/*</url pattern>
</servlet mapping>
(5)以上配置全部完成后,将SSH项目FckEditor部署在tomcat服务器下,启动tomcat服务器,在浏览器地址输入
http://localhost:8080/FckEditor/index.jsp,上传图片附件,效果如图3所示
(6)上传完成后效果如图4所示。
图3上传图片附件效果图4上传完成后的效果
3.4配置问题解决补充
(1)以上配置完成后,FckEditor和Java Web环境下JSP页面便完成了基本兼容。
之后,还可以根据开发者个人喜好在FckEditor.properties文件中添加删除配置,也可以对fckeditro目录下的editor文件目录中的fckconfig.js文件做配置和修改。
其中的具体属性可以参考FckEditor官方网站提供的参考文档。
(2)为了精简项目可以将fckeditro目录下的editor文件目录中关于PHP、ASP的配置文件删除。
只保留fckconfig.js、FckEditor.js、fckpackager.xml、fckstyles.xml、fcktemplates.xml5个文件即可,还可以将fckeditro目录下的_samples文件夹删除,至此得到精简版的FckEditor。
(3)FckEditor在配置过程中若遇到中文乱码的问题,主要是与项目有关,所以建议使用者在编码设置和页面设置时采用统一的编码格式,就能很好地避免这类问题。
4结束语
本文所做的FckEditor在Java Web环境下的配置解决方案,能够很好解决FckEditor和Java Web项目之间的兼容和配套使用问题,简单快捷地完成配置过程。
利用FckEditor编辑器提供的
强大编辑功能,能让用户方便地对编辑的内容进行修改和排版,可以更加方便地上传图片、文档、动画文件等,并将其轻松加载到网页内容中,也可以通过插入信息组件与其他网页内容进行整合,使得网页效果更加个性化、美观化。
参考文献:
[1]刘颖.FCKeditor在Web开发中的应用[J].电脑开发与应用,2009(2).
[2]蒙祖强,龚涛.Jsp程序员成长攻略[M].北京:中国水电水利出版社,2008.。