引入commons-io依赖

1
2
3
4
5
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>

修改config.js文件

在 ckeditor 文件夹中找到 config.js 文件,设置上传图片的请求地址,参考代码如下

1
2
3
4
5
6
7
8
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
//编辑器颜色
config.uiColor = '#daeef5';
//上传图片路径
config.filebrowserUploadUrl = "/ckeditorUpload";
};

Java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* 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();
}

上传步骤

  1. 在 CKEditor 编辑器工具栏找到图像按钮并点击

  2. 选择上传标签页,选择文件并上传到服务器

  3. 选择图片要显示的尺寸,并点击确定即可完成图片上传

    20210227090442.jpg