1 / 8 FCKEditor 使用、修改源代码经验总结 作者：刘岩 Email：suhuanzheng7784877@163.com 前言： 废话不多说了，搞过 web 开发的人大概都知道 FCKeditor 是做为在线 HTML 编辑器的，类似 于 word 的编辑试图和展现方式，实际上幕后依然是转成了 HTML 脚本的。因为笔者使用的 是 Java 语言，所以开发环境也是基于 Java 的 IDE，其他语言的版本的集成和使用请查阅 google。 在使用 fck 中会遇到一些问题，大家需要修改一下它的源代码（还好它是开源的）才能解决。 下载： 从网站 http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.4.1/下载压缩包，和源代 码包 src（内涵源代码，版本因人而异，个人觉得 2.4.1 足够了） 在自己的项目中使用 FCKeditor： 1.在自己的 web 项目中添加一下 jar 包 /FCKDemo/WebRoot/WEB-INF/lib/commons-fileupload-1.2.1.jar /FCKDemo/WebRoot/WEB-INF/lib/commons-io-1.3.2.jar /FCKDemo/WebRoot/WEB-INF/lib/slf4j-api-1.5.2.jar /FCKDemo/WebRoot/WEB-INF/lib/slf4j-simple-1.5.2.jar /FCKDemo/WebRoot/WEB-INF/lib/java-core-2.4.1.jar 其中 java-core-2.4.1.jar 是 fck 自己的 java 程序原包、里面包含了 fck 的核心 servlet 和一些辅 助 util 处理类。它在 fckeditor-java-2.4.1-bin.zip 的根目录下面。commons-fileupload-1.2.1.jar、 commons-io-1.3.2.jar 、 slf4j-api-1.5.2.jar 在 fckeditor-java-2.4.1-bin.zip 的 lib 下 面 ， 而 slf4j-simple-1.5.2.jar 需要读者自己从网上下载。 2.在您的 web 项目 src 下面添加 fckeditor.properties 文件，内容如下 connector.userFilesPath=/UserUploadFile connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|t xt|doc|wma|wmv|mp3|flv|swf| connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|flv|swf| connector.resourceType.image.extensions.allowed=|jpg|png|gif| connector.resourceType.flash.extensions.allowed=|swf| connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionIm pl fckeditor.basePath = /fckeditor fckeditor.skinPath =/skins/silver/ 配置文件里面的配置相信聪明的您一看英文就知道什么意思了，虽然笔者英语很差，但是也 大概知道配置的大致意思。 3.引入 fckeditor 的 javascript 文件 把您下载的源码包 fckeditor-java-2.4.1-src.zip 中的 fckeditor-java-2.4.1-src.zip\fckeditor-java-2.4.1\java-demo\src\main\webapp 下的 fckeditor 文件 夹解压后整个拷贝到您的页面文件夹下。并且与 fckeditor 文件夹同级建立一个叫做 UserUploadFile 的文件夹用于存储用户上传的文件。 4.加入 fckservlet： 2 / 8 修改 web.xml，内容如下 Connector net.fckeditor.connector.ConnectorServlet 1 Connector /fckeditor/editor/filemanager/connectors/* OK，完成以上步骤，基本上就把 FCKEditor 加入到您的 web 项目中了。 下面我们来写个 JSP 页面测试一下效果 新建一个 JSP 页面 form.jsp，内容如下： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>

3 / 8

在新建一个显示页面 result.jsp，内容如下 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String content = request.getParameter("content"); content = new String(content.getBytes("iso-8859-1"), "UTF-8"); System.out.println("---------------------"); out.println(content); System.out.println("---------------------"); %> 启动 web 服务器，打开 IE 输入 url ：http://127.0.0.1:8080/FCKDemo/form.jsp，效果如下： 编辑一下，上传一张图片试试，效果如下 4 / 8 提交后显示如下 OK，到此为止，FCK 基本集成到您的 web 系统当中。但是目前出现了几个问题。 1. 上传文件是中文名称的会出现异常 2. 建立中文文件夹会出现异常 3. 图片默认是文件夹存储方式，读取图片也是文件路径形式，如果项目需求只能采用二进 制流存储（比如说运行环境是云计算环境），则不得不去修改源码。 好的，基于以上问题我们刚刚下载的源代码就有用处了，我们不得不去修改它的源代码来满 足我们的要求，呵呵，尤其是第三条，没办法，运行时环境所致…… 修改源代码 1. 修改核心 servlet 打开 net.fckeditor.connector.ConnectorServlet，修改以下内容 在 151 行修改如下 newFolderStr = new String(newFolderStr.getBytes("iso8859-1"),"utf-8"); 5 / 8 logger.debug("Parameter NewFolderName: {}", newFolderStr); 在 242 行的位置修改如下 ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); 这样在 servlet 中修改后的代码至少不会中文乱码了。 2. 修改 web 服务器的编码格式为 UTF-8 格式，所以如果您的 web 项目放到自己可以操作的 linux 下当然可以控制自己的服务器编码了，但如果您是放在 ISP 服务商提供的虚拟空间 中，之前一定要确定他们的 web 服务器编码格式是 UTF-8 的，否则不支持中文文件上传 的。 3. 下面我们解决存储流图片的问题，有时候项目需求需要将所有的文件以数据库二进制流 形式进行存储，这样做的好坏笔者不想过多评论，根据实际情况来选择吧，比这只是给 出修改代码解决。 还是先修改刚刚那个核心的 servlet 类 net.fckeditor.connector.ConnectorServlet 在代码的 289 行的 uplFile.write(pathToSave);下面加上存二进制文件的代码 示例代码如下 //存图片对象 FCKImage fckImage = new FCKImage(); //存储图片流 InputStream inputStream = uplFile.getInputStream(); fckImage.setId(filename); fckImage.setPictureContent(inputStream); fckImage.setSize(uplFile.getSize()); FCKImageDAO fckImageDAO = new FCKImageDAO(); fckImageDAO.save(fckImage); 笔者这里建立了一个 FCKImage 实体，它的 pictureContent 是 InputStream，用于 存储图片。至于 DAO 代码嘛，网上很多代码，在此不再赘述。 之后还得修改一个类文件 net.fckeditor.response. XmlResponse 这个类只要是对页面的 AJAX 调用后的反馈类，此时只需要修改它的 setFiles()方法即可。 修改后的方法如下 /** * Lists all files in the given dir as XML tags. * 文件，应该从数据库中读取图片文件 * @param dir */ public void setFiles(File dir) { if (filesElement != null) { Element parent = (Element) filesElement.getParentNode(); parent.removeChild(filesElement); } 6 / 8 filesElement = document.createElement("Files"); document.getDocumentElement().appendChild(filesElement); FCKImageDAO fckImageDAO = new FCKImageDAO(); List list = fckImageDAO.findAll(); for(FCKImage fckImage : list){ Element fileElement = document.createElement("File"); fileElement.setAttribute("name", fckImage.getId()); fileElement.setAttribute("size", "未知"); long length = 0; if (fckImage.getSize() < 1024) length = 1L; else length = fckImage.getSize()/1024; fileElement.setAttribute("size", String.valueOf(length)); filesElement.appendChild(fileElement); } } 别忙，还有 2 个页面文件没有修改呢， 一个是/fckeditor/editor/dialog/fck_image/fck_image.js 的 OnUploadCompleted 函数，修改 如下： function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg ) { // Remove animation window.parent.Throbber.Hide() ; GetE( 'divUpload' ).style.display = '' ; switch ( errorNumber ) { case 0 : // No errors alert( '文件已经上传成功' ) ; break ; case 1 : // Custom error alert( customMsg ) ; 7 / 8 return ; case 101 : // Custom warning alert( customMsg ) ; break ; case 201 : alert( '文件名已经存在，您上传的文件需要重新命名为 "' + fileName + '"' ) ; break ; case 202 : alert( '无效的文件类型' ) ; return ; case 203 : alert( "安全错误！您可能没有足够的权限来上传，请检查您的服务器。" ) ; return ; case 500 : alert( '连接不可用' ) ; break ; default : alert( '上传错误，代码: ' + errorNumber ) ; return ; } var fileUrlArray = fileUrl.split("/");//全部分割 /** * 指向显示流图片的jsp页面 */ var showIOurl = "/showImage.jsp?fileId="+fileUrlArray[fileUrlArray.length-1]; sActualBrowser = '' ; SetUrl( showIOurl ) ; GetE('frmUpload').reset() ; } showImage.jsp 页面是输出流图片的逻辑页面，稍后奉上源代码。 另一个就是 /fckeditor/editor/filemanager/browser/default/frmresourceslist.html 的 OpenFile 函数。 修改如下： function OpenFile( fileUrl ) { //连接到显示流文件的jsp var showIOurl = "/showImage.jsp?fileId="+fileUrl; window.top.opener.SetUrl( showIOurl ) ; window.top.close() ; 8 / 8 window.top.opener.focus() ; } 可以看到，他们都调用了一个 jsp 页面，用于输出流文件的。 showImage.jsp 代码如下： <% try { out.clear(); response.reset(); response.setContentType("image/jpeg"); //不缓存 response.addHeader("pragma", "NO-cache"); response.addHeader("Cache-Control", "no-cache"); //获得主键id String id = request.getParameter("fileId") == null ? "" : request.getParameter("fileId"); FCKImageDAO fckImageDAO = new FCKImageDAO(); FCKImage fckImage = fckImageDAO.findById(id); InputStream inputStream = fckImage.getPictureContent(); byte[] buffer = new byte[1000]; int bytesum = 0; int byteread = 0; while ((byteread = inputStream.read(buffer)) != -1) { bytesum += byteread; response.getOutputStream().write(buffer, 0, byteread); } inputStream.close(); response.getOutputStream().flush(); System.out.println("调用FCK输出图片流"); } catch (Exception e) { out.println(); } %> 这样以流形式输出图片的需求基本完成，按照以上方式修改基本上可以解决大部分 fckeditor 的本地化修改方案。 2010 年要过去了，2011 就要来了。Happy New Year！