引入commons-io依赖
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
修改config.js文件
在 ckeditor 文件夹中找到 config.js 文件,设置上传图片的请求地址,参考代码如下
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
//编辑器颜色
config.uiColor = '#daeef5';
//上传图片路径
config.filebrowserUploadUrl = "/ckeditorUpload";
};
Java代码
/**
* ckeditor上传图片
*
* @param file
* @param CKEditorFuncNum
* @return
* @throws Exception
*/
@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.getCurrentDateStr2() + System.currentTimeMillis() + ".jpg";
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(articleImageFilePath + "/" + newFileName1));
StringBuffer sb = new StringBuffer();
sb.append("<script type=\"text/javascript\">");
sb.append("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + "/static/images/articleImage/" + newFileName + "','')");
sb.append("</script>");
return sb.toString();
}
上传步骤
-
在 CKEditor 编辑器工具栏找到图像按钮并点击
-
选择上传标签页,选择文件并上传到服务器
-
选择图片要显示的尺寸,并点击确定即可完成图片上传