FCKEditor实现在线编辑器

    摘要：随着web技术的成熟和发展，网络交互活动由逐步走向图形化，多媒化，时尚美观化，在这过程中，网页文本编辑器的发展可以说真实见证了这一变化与发展。FCKeditor作为一种功能强大的开源在线文本编辑器(DHTML editor) 现在已经得到广泛应用，在Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能。^[1]于是，FCKEditor配置的使用也成为每一个开发者的必备技能之一。

    关键词：SSH框架；FCKEditor；文本编辑器

 

SSH框架是基于J2EE轻量级软件开发环境下的三个开源框架：Sping框架、Struts框架、Hibernate框架的融合体，也是目前JavaWeb开发环境下的常用框架。^[2]SSH框架是以JSP页面为主要前端显示页面，而FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、Jsp以及ABAP等不同的编程语言相结合。由于FCKEditor资源轻量化，配置简单，免费开源，文本编辑功能齐全等强大优势，被众多开发者亲睐和使用。本文主要讲解基于SSH框架下，Jsp页面中配置和使用FCKEditor，解决文本编辑、图片上传下载和附件上传下载等问题。

一、配置环境

MyEclipse7.5  Spring2.5  Struts2.5  Hibernate3.0

二、FCKEditor配置文件下载

在FCKEditor的官方网站下载以下文件：

1. 下载最新版的FCKEditor2.6.6文件,下载地址：

http://nchc.dl.sourceforge.net/project/fckeditor/FCKeditor/2.6.6/FCKeditor_2.6.6.zip

1. 下载fckeditor-java-demo-2.6文件,下载地址：

http://nchc.dl.sourceforge.net/project/fckeditor/FCKeditor.Java/2.6/fckeditor-java-demo-2.6.war

三、FCKEditor在SSH框架中的基本配置

1. 在MyExclipse文件下建设SSH框架项目fckeditor。
2. 解压FCKeditor_2.6.6.zip文件，将解压后的根目录下的fckeditor文件夹拷贝到SSH框架项目下的WebRoot目录下;
3. 将下载fckeditor-java-demo-2.6文件解压后，将根目录下WEB-INF目录下的lib目录下的五个.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目录下。

1. 将fckeditor-java-demo-2.6文件下的WebRoot目录下的index.jsp 文件和showdata.jsp拷贝到SSH框架项目下的WebRoot目录下。以上四步完成后的SSH框架项目如图1所示。

 

 

图1

四、实现文本编辑、图片上传和附件上传下载

1. 在SSH框架项目的src目录下新建文件fckeditor.properties,并添加如下内容：

//FCkEditor的基本设置

connector.userFilesPath=/UpFiles

//上传文件或附件的路径及存放文件的文件夹名，可根据项目需要自行设定

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

 //上传下载文件的业务处理类，一般无需修改，按默认方式处理

connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|txt|doc|wma|wmv|mp3|flv|swf|xls|

//上传附件文件的类型限制，可根据项目需要自行删增

connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|flv|swf| 

//上传媒体文件的类型限制，可根据项目需要自行删增

connector.resourceType.image.extensions.allowed=|jpg|png|gif|    //允许上传的图片文件类型，可根据项目需要自行删增

connector.resourceType.flash.extensions.allowed=|swf|

//允许上传的媒体文件类型，可根据项目需要自行删增

fckeditor.basePath = /fckeditor

//FCKEditor的配置文件存放路径，此处要和项目中实际存放的路径保持一致

添加完成后保存。

1. 根据第1步的配置文件要求，在SSH项目的WebRoot目录下新建文件夹UpFiles，在UpFiles根目录先新建四个文件夹一次命名为image、files、flash、media，用来分类存放上传的附件。完成以上两个步骤后效果如图2所示。

 

 

图2

3. 修改index.jsp文件中script脚本，在里面添加如下内容，设置FCKEditor的框架大小，可根据需要自行设定。

• oFCKeditor.Height='400';
• oFCKeditor.Width='800';

1. 在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所示。

 

 

图3

1. 上传完成后效果如图4所示。

 

 

图4

       以上配置完成后，FCKEditor和SSH框架的JSP页面完成了基本兼容。还可以根据开发者个人喜好在fckeditor.properties文件中添加删除配置，还可以对fckeditro目录下的editor文件目录下的fckconfig.js文件做配置和修改。具体属性可以参考FCKEditor官方网站提供的参考文档。

为了精简项目可以将fckeditro目录下的editor文件目录下关于PHP、ASP的配置文件删除。保留fckconfig.js、fckeditor.js、fckpackager.xml、fckstyles.xml、fcktemplates.xml五个文件即可。还可以将fckeditro目录下_samples文件夹删除，至此得到精简版的FCKEditor。

若FCKEditor在配置过程中遇到中文乱码的问题，主要是和项目有重大关系，所以建议使用者编码设置和页面设置采用统一的编码格式，就能很好的避免这类问题。