CKEditor是新一代的FCKeditor，是一個新開發的版本。CKEditor是全球最優秀的網頁線上文字編輯器之一廣泛的被運用于各大網站。
這裡主要介紹ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下載下傳位址：http://ckeditor.com/download 線上示範位址：http://ckeditor.com/demo
ckeditor-java-core-3.5.3.zip 下載下傳位址：http://ckeditor.com/download
CKFinder下載下傳位址：http://cksource.com/ckfinder/trial
1、解壓ckeditor_3.6.4.zip，然後打開ckeditor檔案夾，隻需保留：images、lang、plugins、skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可
其他的檔案可以删除。然後将整個ckeditor放在web工程下，與WEB-INF處于同一級目錄。
2、将ckeditor-java-core-3.5.3.zip解壓，然後将ckeditor-java-core-3.5.3.jar包拷貝至web項目的lib下。
3、将ckfinder_java_2.3.zip解壓，然後将CKFinderJava.war解壓後，将WEB-INF裡面的lib下面所有的jar包拷貝至web項目的lib下，将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder檔案夾拷貝至web工程下，與ckeditor保持同級，将其下的WEB-INF下面的config.xml檔案拷貝至web項目的WEB-INF下，并根據自己的項目稍作調整即可，如下：
<config>
<enabled>true</enabled> <!--注意：這裡預設為false，必須修改為true-->
<baseDir></baseDir> <!--此處空着，不建議填寫任何值-->
<baseURL>http://127.0.0.1:8088/sitenav/uploadFiles/</baseURL> <!---注意：必須改成自己項目的，不然上傳圖檔找不到具體的網絡路徑-->
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
...... ......
</config>
4、然後在web.xml下添加上傳用的配置如下：
<!-- ckfinder檔案上傳配置 start-->
<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>2</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>
<!-- ckfinder檔案上傳配置 end -->
5、然後修改ckeditor下面的config.js，如下：
CKEDITOR.editorConfig = function( config )
{
config.filebrowserBrowseUrl ='../ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl ='../ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl ='../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.language = "zh-cn";
config.image_previewText=' '; //預覽區域顯示内容
config.skin = 'kama';//預設皮膚
//config.skin = 'v2';
//config.skin = 'office2003';
config.toolbar = 'Full';
config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio','TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About']
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-','NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
};
6、然後就是CKEditor+CKFinder在jsp頁面中應用，如下
a、在jsp檔案中加入：
<%@taglib uri = "http://ckfinder.com"prefix="ckf" %>
<%@ taglib uri="http://ckeditor.com" prefix="ck"%>
b、需要添加編輯元件如下編寫
<s:textareaid="txt" name="company.txt" rows="5"cols="120"></s:textarea>
<ckf:setupCKEditor basePath="/sitenav/ckfinder/" editor="txt"/>
<!---注意：這裡的sitenav為我的項目名稱，請換成自己的項目名--->
<ck:replacereplace="txt" basePath="${path}/ckeditor"></ck:replace>
<!---注意：這裡的${path}需要自己定義一個，如：pageContext.setAttribute("path",request.getContextPath());--->
注意:上傳的圖檔有中文名，上傳後會不能正常顯示預覽
附：
1.可以像CKEditor那樣通過修改config.js來配置CKFinder的樣式
1 config.language = 'zh-cn';//語言設定
2 config.width='1000px';//寬度
3 config.height='400px';//高度
4 config.skin='kama';//界面：kama/v1
5 config.toolbar='Basic';//工具欄：Full/Basic
2.上傳檔案按照時間自動重新命名。有朋友提出這個問題，以前我倒是沒有注意。CKFinder預設上傳的檔案名和源檔案名一緻，如果檔案名重複會自動添加編号“(1)”、“(2)”等，可見com.ckfinder.connector.handlers.command.FileUploadCommand.java的getFinalFileName方法。經過查找發現validateUploadItem(finalFileItem item, final String path)方法下有一句：
[java]view plaincopyprint?
6 this.newFileName = this.fileName;
this.newFileName = this.fileName;
感覺這就是問題的所在了，改寫代碼：
[java]view plaincopyprint?
7 String sExtentsion =FileUtils.getFileExtension(this.fileName);
8 SimpleDateFormat format= newSimpleDateFormat("yyyyMMddHHmmss");
9 this.newFileName =format.format(new Date()) +"." + sExtentsion;
![通用查詢、分頁詳解J2EE[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)