首页 > > 程序设计 > Java技术 >

ckeditor4.7配置图片上传

2019-08-16 11:46:36来源：博客园阅读 ()

ckeditor作为老牌的优秀在线编辑器，一直受到开发者的青睐。

这里我们讲解下 ckeditor最新版本4.7的图片上传配置。

https://ckeditor.com/ 官方

进入下载 https://ckeditor.com/download

QQ鎴浘20170820202125.jpg

我们下载完整版

默认本地上传没有开启；

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

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

刷新页面，点击那个上传图片图标，

QQ鎴浘20170820202625.jpg

出现了上传；

然后我们配置下上传后台请求路径

找到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

原文链接:https://www.cnblogs.com/share-record/p/11291645.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有