url:   http://blog.csdn.net/xiao__gui/article/details/7684505

本人使用的CKEditor版本是3.6.3。CKEditor配置和部署我就不多說。

CKEditor的編輯器工具欄中有一項“圖片域”，該工具可以貼上圖片地址來在文字編輯器中加入圖片，但是沒有圖片上傳。

“預覽”中有一大堆鳥語，看得很不爽。可以開啟ckeditor/plugins/image/dialogs/image.js檔案，搜尋“b.config.image_previewText”就能找到這段鳥語了，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。

掃除這個障礙，下面來研究圖片上傳。

1.首先，還是image.js這個檔案，搜尋“upload”可以找到這一段

id:'Upload',hidden:true

實際上上傳功能被隱藏了，把上面的true改成false，再開啟編輯器，就能找到上傳功能了。

2.上面的只是一個上傳頁面。也就相當於一個HTML的form表單，要配置點選“上傳到伺服器上”按鈕後請求的Action。可以在ckeditor/config.js中配置。

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";

var pathName = window.document.location.pathname;
    //獲取帶"/"的專案名，如：/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    config.filebrowserImageUploadUrl = projectName+'/system/upload.do'; //固定路徑

"ckeditorUpload"是請求的URL，也就是點選這個按鈕就會post到ckeditorUpload地址進行處理，這裡指向的是Struts 2的一個Action。當然，也可以用servlet或者ASP、PHP等來處理請求。

3.檔案上傳的控制元件相當於<input  type="file" name="upload" .../>，其name是”upload”，知道了name那麼就可以在Action中獲取這個檔案。

private File upload;  //檔案

private String uploadContentType;  //檔案型別

private String uploadFileName;   //

以上三個私有變數都要有set方法。如果不瞭解的話可以先學習一下Struts 2檔案上傳。

4.如果上傳的圖片格式不正確，可以在上傳介面進行提示。

這個提示不是ckeditor提示的，要在Action中響應。

HttpServletResponse response =ServletActionContext.getResponse();

response.setCharacterEncoding("GBK");

PrintWriter out = response.getWriter();

if(???){

            out.print("<font color=\"red\"size=\"2\">*檔案格式不正確（必須為.jpg/.gif/.bmp/.png檔案）</font>");

return null;

}

5.

  InputStream is = newFileInputStream(upload);

  String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg");   //設定儲存目錄

  String fileName =java.util.UUID.randomUUID(); //採用UUID的方式隨機命名

  fileName+= uploadFileName.substring(uploadFileName.length() - 4);

  File toFile = new File(uploadPath, fileName);

  OutputStream os = new FileOutputStream(toFile);  

  byte[] buffer = new byte[1024];  

  int length = 0;

  while ((length = is.read(buffer)) > 0) {  

        os.write(buffer, 0, length);  

  }  

  is.close();

  os.close();

這段程式碼是Struts 2上傳圖片的核心程式碼，把圖片上傳後儲存在專案的某個目錄下，並隨機重新命名。

6.圖片上傳成功，在目錄下也可以看到圖片，至此圖片上傳成功。但是如何將圖片發到編輯器中呢？

點“確定”按鈕會有以下提示。

到這裡，要在Action中加入一段JS。

String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 

out.println("<scripttype=\"text/javascript\">");

out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')"); 

out.println("</script>");

有了這段程式碼，圖片上傳成功後，根據這裡的

"img/postImg/" + filename

相對地址，就可以使用這個圖片，直接轉到“影象”頁面。

附：Struts 2 Action程式碼

1. publicclass CkeditorUpload extends ActionSupport {  
2.     private File upload;  
3.     private String uploadContentType;  
4.     private String uploadFileName;  
5.     public File getUpload() {  
6.         return upload;  
7.     }  
8.     publicvoid setUpload(File upload) {  
9.         this.upload = upload;  
10.     }  
11.     public String getUploadContentType() {  
12.         return uploadContentType;  
13.     }  
14.     publicvoid setUploadContentType(String uploadContentType) {  
15.         this.uploadContentType = uploadContentType;  
16.     }  
17.     public String getUploadFileName() {  
18.         return uploadFileName;  
19.     }  
20.     publicvoid setUploadFileName(String uploadFileName) {  
21.         this.uploadFileName = uploadFileName;   }  
22.     public String execute() throws Exception {  
23.         HttpServletResponse response = ServletActionContext.getResponse();  
24.         response.setCharacterEncoding("GBK");  
25.         PrintWriter out = response.getWriter();  
26.         //對檔案進行校驗
27.         if(upload==null || uploadContentType==null || uploadFileName==null){  
28.             out.print("<font color=\"red\" size=\"2\">*請選擇上傳檔案</font>");  
29.             returnnull;  
30.         }  
31.         if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg"))  
32.                 && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")) {  
33.             //IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
34.         }elseif(uploadContentType.equals("image/png") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){  
35.         }elseif(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){  
36.         }elseif(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){  
37.         }else{  
38.             out.print("<font color=\"red\" size=\"2\">*檔案格式不正確（必須為.jpg/.gif/.bmp/.png檔案）</font>");  
39.             returnnull;  
40.         }  
41.         if(upload.length() > 600*1024){  
42.             out.print("<font color=\"red\" size=\"2\">*檔案大小不得大於600k</font>");  
43.             returnnull;  
44.         }  
45.         //將檔案儲存到專案目錄下
46.         InputStream is = new FileInputStream(upload);  
47.         String uploadPath = ServletActionContext.getServletContext()     
48.                 .getRealPath("/img/postImg");   //設定儲存目錄
49.         String fileName = java.util.UUID.randomUUID();  //採用UUID的方式隨機命名
50.         fileName += uploadFileName.substring(uploadFileName.length() - 4);  
51.         File toFile = new File(uploadPath, fileName);  
52.         OutputStream os = new FileOutputStream(toFile);     
53.         byte[] buffer = newbyte[1024];     
54.         int length = 0;  
55.         while ((length = is.read(buffer)) > 0) {     
56.             os.write(buffer, 0, length);     
57.         }     
58.         is.close();  
59.         os.close();  
60.         //設定返回“影象”選項卡
61.         String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");    
62.         out.println("<script type=\"text/javascript\">");    
63.         out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')");    
64.         out.println("</script>");  
65.         returnnull;  
66.     }  
67. }