ckeditor4.7配置圖片上傳

ckeditor作為老牌的優秀在線編輯器，一直受到開發者的青睞。

 

這里我們講解下 ckeditor最新版本4.7的圖片上傳配置。

 

https://ckeditor.com/ 官方

 

進入下載 https://ckeditor.com/download

 

 

我們下載完整版

 

默認本地上傳沒有開啟；

 

找到ckeditor/plugins/image/dialogs/image.js文件 打開 

然后搜索 id:"Upload",hidden   默認值是!0 我們改成0即可

 

刷新頁面，點擊那個上傳圖片圖標，

 

出現了上傳；

 

然后我們配置下上傳后台請求路徑

找到ckeditor下的config.js 打開

config.filebrowserUploadUrl="/admin/film/ckeditorUpload";

配置下  

 

后台處理有個callback參數CKEditorFuncNum我們要接收下 並且要返回

這里我下我項目里的參考實現 用的是springboot

/**
 * 上傳圖片
 * @param file
 * @return
 */
@ResponseBody
@RequestMapping("/ckeditorUpload")
public String ckeditorUpload(@RequestParam("upload")MultipartFile file,String CKEditorFuncNum)throws Exception{
    // 獲取文件名
    String fileName = file.getOriginalFilename();
    // 獲取文件的后綴名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    String newFileName=DateUtil.getCurrentDateStr()+suffixName;
    FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath+newFileName));
     
    StringBuffer sb=new StringBuffer();
    sb.append("<script type=\"text/javascript\">");
    sb.append("window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ",'" +"/static/filmImage/"+ newFileName + "','')");
    sb.append("</script>");
     
    return sb.toString();
}

獲取文件，重命名，搞到本地 然后返回ajax信息。