CKEditor,CKFinder實現文件上傳

下面簡單介紹兩者的配置整合使用,有不對的地方請指出。

一,下載CKEditor,CKFinder。

去官網下載CKEditor:http://ckeditor.com/download

去官網下載CKFinder:http://cksource.com/ckfinder

CKFinder一般選擇php就行,若是java web開發,選擇CKFinderJava


這裏選擇的是CKFinderJava,因爲要做java web開發,配合struts來實現文件的上傳。

下載來的CKFinderJava裏有個war包,把它解壓出來,可以看到它似一個web應用目錄。裏面包含ckfinder.

二,導入CKEditor,CKFinder。

把下載到的CKEditor,CKFinder複製到web應用根目錄中。


把ckfinder中的config.js文件複製至WEB-INF目錄中


把ckfinder中lib包下面的jar包拷貝到web目錄的lib中


在web.xml中加入下面內容:


三,在jsp頁面中使用。

引入相關js文件,定義textarea並使用ckeditor替換


配置文件上傳的目錄路徑


不設置則是使用相對路徑,默認上傳到 服務器的userfiles中。

另外如果是SSH開發,注意struts.ml文件的配置

struts過濾器如配置成攔截所有的請求,/*  則文件將上傳失敗。此外在struts.xml文件中也要配置一下臨時文件上傳目錄。


附:

FCKeditor獲取編輯器中的內容:

FCKeditorAPI.GetInstance("編輯器id").GetXHTML();(包含編輯器中的HTML標籤)

FCKeditorAPI.GetInstance("編輯器id").EditorDocument.body.innerText;(純文本內容,不包括HTML代碼)。

但經過實踐,第二條獲取不到編輯器的內容,使用以下語句獲取:

FCKeditorAPI.GetInstance("content").EditorDocument.body.innerHTML;(帶HTML標籤);

FCKeditorAPI.GetInstance("content").EditorDocument.body.textContent;(不帶HTML標籤)。

CKeditor獲取編輯器中的內容:

 var content= CKEDITOR.instances.(編輯器id).document.getBody().getText(); //取得純文本   

 var content= CKEDITOR.instances.["編輯器id"].getData();//取得帶HTML文本 

js判斷content(純文本)是否爲空,

if(content ==""||content==null){

     alert("內容不能爲空!");

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章