先介紹下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 （解壓）
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;
最后來張圖結束
關於相關用到的源碼，請點擊下載