CKEditor上传图片

引入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();
}

上传步骤

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

   

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

   

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