CKEditor實現(xiàn)圖片上傳

洋yangyang 2015-07-20

展開全文

本人用的CKEditor版本為4.3 CKEditor配置和部署參考CKEditor4.x部署和配置。

CKEditor編輯器的工具欄中初始的時候應(yīng)該是這樣子的，沒有圖片上傳按鈕

并且預(yù)覽中有一堆火星文，可以修改相應(yīng)配置刪除它。

第一種方法：打開ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')單引號中的內(nèi)容全刪了，注意別刪多了。(由于ckeditor的很多js文件都是壓縮過的，格式很難看，很容易刪錯，所以不推薦此種方法)

第二種方法：打開config.js文件，加入下面一句話

config.image_previewText=' '; //預(yù)覽區(qū)域顯示內(nèi)容

下面研究圖片上傳

要想出現(xiàn)上傳按鈕，兩種方法

第一種：還是剛才那個image.js
搜索“upload”可以找到這一段 id:'Upload',hidden:true，而我使用的4.3的是

id:"Upload",hidden:!0，反正改為false就行了，(遺憾的是此種方法對我這個版本不起作用)

第二種：打開config.js文件，加入下面一句話

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待會要上傳的action或servlet

OK現(xiàn)在基本上是下面這個樣子的了

上面的只是一個上傳頁面。也就相當(dāng)于一個HTML的form表單，

要配置點擊"上傳到服務(wù)器上"按鈕后請求的Action。已在ckeditor/config.js中配置。

就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";

可使用chrome審查元素查看代碼

接下來就是action中的上傳方法：

[java]view plaincopy
import java.io.File;  
import java.io.FileInputStream;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.OutputStream;  
import java.io.PrintWriter;  
  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import org.apache.struts2.ServletActionContext;  
  
public class ImgUploadAction {  
    private File upload; // 文件  
    private String uploadContentType; // 文件類型  
    private String uploadFileName; // 文件名  
  
    /** 
     * 圖片上傳 
     *  
     * @return 
     * @throws IOException 
     */  
    public String imgUpload() throws IOException {  
  
        // 獲得response,request  
        HttpServletResponse response = ServletActionContext.getResponse();  
        HttpServletRequest request = ServletActionContext.getRequest();  
  
        response.setCharacterEncoding("utf-8");  
        PrintWriter out = response.getWriter();  
        // CKEditor提交的很重要的一個參數(shù)  
        String callback = request.getParameter("CKEditorFuncNum");  
        String expandedName = ""; // 文件擴展名  
        if (uploadContentType.equals("image/pjpeg")  
                || uploadContentType.equals("image/jpeg")) {  
            // IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg  
            expandedName = ".jpg";  
        } else if (uploadContentType.equals("image/png")  
                || uploadContentType.equals("image/x-png")) {  
            // IE6上傳的png圖片的headimageContentType是"image/x-png"  
            expandedName = ".png";  
        } else if (uploadContentType.equals("image/gif")) {  
            expandedName = ".gif";  
        } else if (uploadContentType.equals("image/bmp")) {  
            expandedName = ".bmp";  
        } else {  
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）');");  
            out.println("</script>");  
            return null;  
        }  
        if (upload.length() > 600 * 1024) {  
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件大小不得大于600k');");  
            out.println("</script>");  
            return null;  
        }  
  
        InputStream is = new FileInputStream(upload);  
        //圖片上傳路徑  
        String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");  
        String fileName = java.util.UUID.randomUUID().toString(); // 采用時間+UUID的方式隨即命名  
        fileName += expandedName;  
        File file = new File(uploadPath);  
        if (!file.exists()) { // 如果路徑不存在，創(chuàng)建  
            file.mkdirs();  
        }  
        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();  
  
        // 返回"圖像"選項卡并顯示圖片  request.getContextPath()為web項目名   
        out.println("<script type=\"text/javascript\">");  
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                + ",'" + request.getContextPath() + "/img/uploadImg/" + fileName + "','')");  
        out.println("</script>");  
        return null;  
    }  
  
    public File getUpload() {  
        return upload;  
    }  
  
    public void setUpload(File upload) {  
        this.upload = upload;  
    }  
  
    public String getUploadContentType() {  
        return uploadContentType;  
    }  
  
    public void setUploadContentType(String uploadContentType) {  
        this.uploadContentType = uploadContentType;  
    }  
  
    public String getUploadFileName() {  
        return uploadFileName;  
    }  
  
    public void setUploadFileName(String uploadFileName) {  
        this.uploadFileName = uploadFileName;  
    }  
}  

config.js

[html]view plaincopy
CKEDITOR.editorConfig = function( config ) {  
     config.image_previewText=' '; //預(yù)覽區(qū)域顯示內(nèi)容  
     config.filebrowserImageUploadUrl= "ImgUpload.action"; //要上傳的action或servlet   
};  