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 信息.
转载: http://blog.java1234.com/blog/articles/339.html
来源: http://www.bubuko.com/infodetail-3142089.html