ckeditor4.7配置图片上传

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值