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