jsp中如何整合CKEditor+CKFinder實現檔案上傳

標籤：

 最近筆者做了一個新聞發布平台，放棄了之前的FCKEditor編輯器，使用了CKEditor+CKFinder，雖然免費的CKFinder是Demo版本，但是功能完整，而且使用者都是比較集中精神發新聞的人，不會在意這個。筆者使用的版本分別是：CKEditor3.5.3+CKFinder2.0.2，今天筆者整理了一下配置CKEditor和CKFinder的過程，以及需要注意的一些問題，希望對大家有所協助。

第一：下載CKEditor和CKFinder相關的安裝檔案

1、在CKEditor官網http://ckeditor.com/download上下載CKEditor for Java 3.5.3 war包，裡麵包含了相關的jar、指令碼和樣本。

2、在CKFinder官網http://ckfinder.com/download下載ckfinder_java_2.0.2.zip壓縮包(注意選擇Java平台下的壓縮包)。

3、解壓CKEditor for Java 3.5.3 war，把解壓得到的目錄 ckeditor 完全複製到網站根目錄下，也就是和WEB-INF同級。可以給這個目錄加上版本號碼，即ckeditor3.5.3。把 ckeditor3.5.3/samples 完全刪掉，把 ckeditor3.5.3/lang 裡面除了en.js和zh-cn.js之外的檔案刪掉，把 ckeditor3.5.3下的README.md, CHANGES.md刪掉。把 ckeditor-java-core-3.5.3.jar 放到項目/WEB-INF/lib下

4、解壓CKFinder_java_2.3.1.zip，得到ckfinder目錄。將 ckfinder/CKFinderJava/ckfinder 目錄完全複製到網站根目錄下，也就是和WEB-INF同級。可以給這個目錄加上版本號碼，即ckfinder2.0.2。參考CKFinderJava裡的配置，在WEB-INF路徑下添加CKFinder設定檔config.xml（可以將CKFinderJava檔案夾裡的config.xml檔案直接拷到工程下，稍加修改即可）。

第二：配置CKEditor

   可以通過編輯ckeditor檔案夾下的config.js來更改CKEditor的預設配置，也可以在頁面建立CKEditorConfig的執行個體來添加或覆蓋config.js裡面的配置。

config.js

頁面配置ckeditor.jsp：

：

第三：整合CKEditor和CKFinder

   剛才已經配置好CKEditor，但是有個問題是支援jsp的版本的CKEditor一般預設沒有圖片上傳功能，現在就需要正好CKFinder實現圖片上傳功能。

1、在CKEditor的設定檔config.js中添加引用CKFinder的配置。

2、修改CKFinder的config.xml檔案

 

3、在web.xml中添加支援CKFinder的Servlet

4、參考樣本建立頁面ckfinder.jsp

 

效果

 

至此，CKEditor3.5.3+CKFinder2.0.2整合成功，工程結構

 

原始碼：源碼下載

jsp中如何整合CKEditor+CKFinder實現檔案上傳