Struts+CKEditor+CKFinder JAVA版配置总结

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值