CKEditor3.6.2与CKFinder2.1整合（java版本）

先介绍下ckeditor的单独配置，在介绍下eidtor与finder的整合

一、CKEditor的使用

1.下载地址 http://ckeditor.com/download

2.将整个文件目录拷贝到Webroot目录下

3.使用:

　　3.1 js版本

　　

<!-- 引入ckeditor js -->
         <script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
             
             <script type="text/javascript">  
            window.onload = function()   
            {   
            CKEDITOR.replace( 'editor1' );   
            };   
         </script> 

<textarea id="editor1" name="editor1"></textarea>  

　　3.2java版本

　　　　下载相关的Jar包 点击下载，将ckeditor-java-core-3.5.3.jar放在web/lib目录下

　　　　删除ckeditor_php4.php和ckeditor_php5.php

　　　　

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
        <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            </p>
        <ckeditor:replace replace="editor1" basePath="ckeditor/" />

　　　　更多参考

二、CKEditor整合CKFinder

　　建议不要选用最新的版本，否则破解的话，会存在比较大的问题。

一.资源下载

a) ckeditor_3.6.2 （解压）

download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip 

b) ckeditor-java-3.6.2 （解压）

download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.2/ckeditor-java-3.6.2.war

c) ckfinder_java_2.1 （解压）

download.cksource.com/CKFinder/CKFinder%20for%20Java/2.1/ckfinder_java_2.1.zip

二.步骤　　

1. MyEclipse新建 Web Project ： CKEditor_Finder

2. 复制以下文件夹到WebRoot 下面：

ckfinder_java_2.1\ckfinder\ CKFinderJava \ckfinder

注意：CKFinder 加粗的是 war 包解压后的文件夹的名称

ckeditor_3.6.2/ckeditor

3. 复制 CKFinder配置文件 到WEB-INF 下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml

4. 复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor-java-3.6.2\WEB-INF\lib

三． 下面删除无用的文件

首先是ckeditor 下面的文件：

_sample,_source, CHANGES.html， ckeditor_php4.php ，  ckeditor_php5.php, 

ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder 下面的文件：

_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四.修改config.xml　

　　

    <enabled>true</enabled>
    <baseDir></baseDir>
    <baseURL>/CKEditor_Finder/userfiles/</baseURL>

ps:enabled 节点修改成true,baseURL节点中的CKEditor_Finder改成自己的工程

五.修改web.xml

<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/config.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>
            /ckfinder/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>
            /ckfinder/core/connector/java/connector.java
        </url-pattern>
    </filter-mapping>
    <session-config>
        <session-timeout>10</session-timeout>
    </session-config>

六、修改ckeditor/config.js

CKEDITOR.editorConfig = function (config) {
    config.filebrowserBrowseUrl = "/CKEditor_Finder/ckfinder/ckfinder.html";
    config.filebrowserImageBrowseUrl = "/CKEditor_Finder/ckfinder/ckfinder.html?type=Images";
    config.filebrowserFlashBrowseUrl = "/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash";
    config.filebrowserUploadUrl = "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files";
    config.filebrowserImageUploadUrl = "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images";
    config.filebrowserFlashUploadUrl = "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash";
    config.filebrowserWindowWidth = "1000";
    config.filebrowserWindowHeight = "700";
    config.language = "zh-cn";
};

　　这里需要注意的是

CKEditor_Finder 是自己创建的工程名

七.展示

　　

<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://ckfinder.com" prefix="ckfinder"%>
<%@taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">
        <title>首页</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
    </head>
    <body>
        <form action="getContent" method="get">
            <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            <input type="submit" value="Submit" />
        </form>
        <ckfinder:setupCKEditor basePath="/CKEditor_Finder/ckfinder/"
            editor="editor1" />
        <ckeditor:replace replace="editor1"
            basePath="/CKEditor_Finder/ckeditor/" />
    </body>
</html>

八.关于异常

比如tomcat的

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding ="UTF-8"/>
还有一个隐蔽的错误就是
getTextContent()Ljava/lang/String;
此异常是因为jdk1.5以上的版本与tomcat\common\endorsed下的xml-apis.jar的类发生冲突,解决办法如下:

1,将common\endorsed下的xml-apis.jar移出或删掉. (已测试过)

2. 用xalan系列jar包替换原来的xercesImpl.jar和xml-apis.jar。
xalan系列jar包：serializer.jar、xalan.jar、xercesImpl.jar和xml-apis.jar。(网上留传的)

九.破解

　　1.修改图片主界面的字符(即<h4>标签)对应的内容

　　

return a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1 改为return false;

　　2.修改图片上传后出现的字符

/*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) {
P.mj = J;
S = 1;
}
if ((P.eu && !T || S) && P.mj) {    Q.addClass('files_message');    this.tools.of().setHtml(P.mj);
}*/

　　3.修改左下角的字符

/*if (!B)this.dV().getChild(0).appendHtml(y || z || w != 4 ? r: s+ "\074\x62\x3e"+i.htmlEncode(a.ed)+"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/

需要注意的是查找上述修改的代码，只能通过指定的字符去查找，而且要考虑到字符间的空格

　　4.修改上传文件名

　　在FileUploadCommand.java中有个方法validateUploadItem(final FileItem item, final String path)

　　

//源代码
//this.newFileName = this.fileName;  
//修改源代码
String sExtentsion = FileUtils.getFileExtension(this.fileName);  
SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");  
this.newFileName = format.format(new Date()) + "." + sExtentsion;  

最后来张图结束

关于相关用到的源码，请点击下载