CKEditor(FCKEditor)是一个很不错的开源在线文本编辑器,CKFinder为CKEditor提供了丰富的上传功能,在此只是总结一下在SSH环境下如何配置好这两个东东,关于一些再详细的配置步骤网上到处都是,google搜索一下就行了。
0.约定
(1)使用Eclipse建立了Dynamic Web project,已经配置好SSH(Struts+Spring+Hibernate)环境(包括Tomcat 7)
(2)以下xx代表项目名称
1.下载
使用版本如下:
CKEditor 4.1.2:http://ckeditor.com/download
CKFinder 2.3.1:http://cksource.com/ckfinder/download
以上CKEditor是免费的,CKFinder是DEMO,需要付费,但下载下来的文件时完整的,包括源文件,所以可以自行破解修改。为了支持JAVA,CKFinder可以选择JAVA版本下载,CKEditor还需要下载
CKEditor 3.6.4 for JAVA:http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.5.3/ckeditor-java-core-3.5.3.zip
不过下载的是3.5.3版本,正常使用,不深究了。
2.简单配置
(1)解压所有文件,把里面的sample说明之类的统统删除,lang文件夹中只保留en和zh-cn,复制到项目文件夹下,CKEditor和CKFinder改名为xxedit和xxfinder把ckeditor-java-core-3.5.3和xxfinder/web-inf/lib下面的的所有包统统复制到xx/web-inf/lib,把ckfinder/meta-inf/context.xml和ckfinder/web-inf/config.xml(改名为xxfinder.xml)复制到项目中的meta-inf和web-inf的位置。如下图,红色处为项目名xx。
(2)配置xxfinder.xml(即ckfinder的config.xml)
<enabled>true</enabled>
<baseURL>/xx/upload/</baseURL>
(3)配置web.xml,使得struts仅拦截自己关心的目标,也支持CKFinder
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/xxfinder.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/xxfinder/core/connector/java/connector.java</url-pattern>
</servlet-mapping>
<filter>
<filter-name>FileUploadFilter</filter-name>
<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
<init-param>
<param-name>sessionCookieName</param-name>
<param-value>JSESSIONID</param-value>
</init-param>
<init-param>
<param-name>sessionParameterName</param-name>
<param-value>jsessionid</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>FileUploadFilter</filter-name>
<url-pattern>/xxfinder/core/connector/java/connector.java
</url-pattern>
</filter-mapping>
(5)在index.jsp文件中插入如下语句(支持CKEditor以及与CKFinde的r整合,参阅http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/CKEditor_Integration和http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration):
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
<!-- method要是post,否则会有乱码出现 -->
<form action="index.jsp" method="post">
<p>
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="保存" />
</p>
</form>
<!-- 以下顺序不能颠倒 -->
<ckfinder:setupCKEditor editor="editor1" basePath=/xx/xxfinder/" />
<ckeditor:replace replace="editor1" basePath=/xx/xxeditor/" />
3.深入分析
2中叙述的大部分和网上介绍的类似,接下来又更进一步修改,碰到了一些问题,逐步加以解决。
(1)CKEditor修改
ckeditor.js修改文件名后,需要相应修改其文件中的ckeditor字段(注意需要大小写匹配),还需要修改ckeditor-java-core-3.5.3中的TagHelper.createCKEditorIncJS。
(2)CKFinder修改
去掉CKFinder的版权信息和Help
需要修改ckfinder.js中
1)
p="\074\144\x69\x76\040\143\x6c\141\163\163\x3d\047\x76\151\145\167\x20\164\x6f\157\154\137\x70\x61\x6e\145\x6c\047\x20\x73\x74\171\154\145\x3d\x27\160\141\x64\x64\x69\156\147\x3a\062\160\x78\073\144\x69\163\x70\154\141\171\072\142\154\157\x63\x6b\x20\041\151\155\x70\157\162\164\x61\x6e\164\x3b\160\157\163\151\x74\x69\157\156\072\163\164\x61\x74\151\143\x20\041\151\x6d\160\x6f\x72\x74\x61\156\x74\073\143\x6f\x6c\x6f\x72\072\142\x6c\141\x63\153\040\x21\x69\x6d\x70\x6f\x72\164\x61\156\164\073\x62\141\143\x6b\x67\x72\157\x75\x6e\144\x2d\143\157\x6c\x6f\162\072\167\150\151\164\145\040\041\151\155\x70\157\162\164\x61\156\164\x3b\047\076",q="\x3c\057\144\151\x76\x3e"
后面的
r=p+"版权信息可以修改"+q,s=p+"删除其中内容"。
2)找到'Upload','Refresh','Settings','Maximize','Help'改成到'Upload','Refresh','Settings','Maximize',''
(3)CKFinder中的Java版源文件修改
上传中文文件会出现乱码,可以多种处理方法,这里简单的修改一下源代码,捕获上传文件名并且修改为以日期时间的文件名,代码如下:
FileUploadCommand.java
import java.util.Date;
import java.text.SimpleDateFormat;
……
private String getFinalFileName(final String path, final String name) {
// File file = new File(path, name);
// int number = 0;
//
// String nameWithoutExtension = FileUtils.getFileNameWithoutExtension(name, false);
// Pattern p = Pattern.compile("^(AUX|COM\\d|CLOCK\\$|CON|NUL|PRN|LPT\\d)$", Pattern.CASE_INSENSITIVE);
// Matcher m = p.matcher(nameWithoutExtension);
// boolean protectedName = m.find() ? true : false;
// while (true) {
// if (file.exists() || protectedName) {
// number++;
// StringBuilder sb = new StringBuilder();
// sb.append(FileUtils.getFileNameWithoutExtension(name, false));
// sb.append("(" + number + ").");
// sb.append(FileUtils.getFileExtension(name, false));
// this.newFileName = sb.toString();
// file = new File(path, this.newFileName);
// this.errorCode =
// Constants.Errors.CKFINDER_CONNECTOR_ERROR_UPLOADED_FILE_RENAMED;
// protectedName = false;
// } else {
return this.newFileName;
// }
// }
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
this.newFileName = sdf.format(date)+"." + FileUtils.getFileExtension(name);
}
在调试时候,还会出现报错,这里修改如下:
ThumbnailCommand.java
response.addHeader("Content-Disposition", "attachment; filename='" + this.fileName + "'");//反斜杠变成单引号
(4)maven编译打包CKFinder,mvn package
4.方向
CKEditor和CKFinder有许多参数固化,不利于日后扩展和集成部署,需要进一步整合,以有利于项目的集成。
参考:
[1] http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html
[2] http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration
[3] http://docs.ckeditor.com/#!/guide/dev_installation