ckeditor4.7配置圖片上傳

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

這裏咱們講解下 ckeditor最新版本4.7的圖片上傳配置。java

https://ckeditor.com/ 官方ajax

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

咱們下載完整版springboot

默認本地上傳沒有開啓；app

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

而後搜索 id:"Upload",hidden 默認值是!0 咱們改爲0便可code

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

出現了上傳；圖片

而後咱們配置下上傳後臺請求路徑

找到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信息。