富文本编辑器Ckeditor上传图片分享

版本：ckeditor4
下载地址：https://ckeditor.com/ckeditor-4/download/
导入到项目中：

image.png

下面将简要讲述下用法：

1、html页面引用

<textarea class="form-item" name="content" id="content" rows="20" cols="80" style="height:800px;"></textarea>
<script src="${ctx}/plugins/ckeditor/ckeditor.js"></script>

2、JS代码

ckeditor本身有个通用配置文件：

image.png

具体可配置的选项可参考官方文档： https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
如果在使用ckeditor时，直接这样写：

CKEDITOR.replace('content');

就是所有配置应用默认配置，也可以自定义配置当作参数传入：

CKEDITOR.replace('content',
            {
                filebrowserImageUploadUrl : Fengunion.ctx+'/admin/fileController/uploadImgForCkeditor?type=12',
                language : 'zh-cn',
                image_previewText:'' ,
                height: 800
            }
        );

当然我这里只作了一些简单的配置，可根据自己的需要对ckeditor功能进行个性化配置：

其中主要想讲解的就是ckeditor上传图片的配置：filebrowserImageUploadUrl ，这个填写上传图片的后台方法地址，实现效果如下图：

image.png

3、上传图片后台代码

controller：默认接收的图片参数名为upload

package com.fengunion.website.controller.admin;

import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.ResultData;
import com.fengunion.website.common.utils.CkeditorUtils;
import com.fengunion.website.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;

@Controller
@RequestMapping("/admin/fileController")
public class FileController {

    @Autowired
    FileService fileService;

    @RequestMapping("/uploadFileCommon")
    @ResponseBody
    public ResultData uploadFileCommon(@RequestParam(name="type", required = false) Integer type, MultipartFile file){
        String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), file);
        return ResultData.ok(url);
    }

    @RequestMapping("/uploadImgForCkeditor")
    @ResponseBody
    public void uploadImgForCkeditor(HttpServletResponse response, String CKEditorFuncNum,
                                     MultipartFile upload, @RequestParam(name="type", required = false) Integer type){
        String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), upload);
        CkeditorUtils.writeCkeditor(response, url, CKEditorFuncNum);
    }
}

CkeditorUtils：

package com.fengunion.website.common.utils;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CkeditorUtils {
    public static void writeCkeditor(HttpServletResponse response, String url, String CKEditorFuncNum){
        String result = "<script type=\"text/javascript\">";
        result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'"  + url + "','上传成功')";
        result += "</script>";
        try {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write(result);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

值得注意的是，上传图片的controller方法返回值是通过输出流的形式返回给ckeditor进行图片预览的，并且返回的格式统一为以下形式：

String result = "<script type=\"text/javascript\">";
        result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'"  + url + "','上传成功')";
        result += "</script>";

然后再用输出流的方式写出去：

try {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write(result);
        } catch (IOException e) {
            e.printStackTrace();
        }

保存文件方法：fileService.saveFile

package com.fengunion.website.service.impl;

import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.CommonResponse;
import com.fengunion.website.common.utils.StringUtils;
import com.fengunion.website.exception.BizException;
import com.fengunion.website.service.FileService;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.UUID;
@Service
public class FileServiceImpl implements FileService {

    @Override
    public String saveFile(String type, MultipartFile file) {
        if(null == file && !file.isEmpty()){
            BizException.newInstance(CommonResponse.FAILED, "上传文件失败，文件缺失！");
        }
        if(StringUtils.isBlank(type)){
            type = FileConstant.COMMON_UPLOAD_PATH;
        }
        try {
            String oldName = file.getOriginalFilename();
            String prefix=oldName.substring(oldName.lastIndexOf(".")+1);
            prefix = "."+prefix;
            String newName = UUID.randomUUID().toString()+prefix;
            // 文件保存路径
            String filePath = FileConstant.getUploadPath() + File.separator + type;
            File desFile = new File(filePath);
            if(!desFile.exists()){
                desFile.mkdirs();
            }
            filePath = filePath+ File.separator + newName;
            // 转存文件
            file.transferTo(new File(filePath));
            return FileConstant.VIEW_PATH+ type + "/" + newName;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}

文件上传定义的常量类：FileConstant

package com.fengunion.website.common.constant;

import com.fengunion.website.common.utils.StringUtils;
import org.springframework.beans.factory.annotation.Value;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;

public class FileConstant {

    @Value("${file.backup.path}")
    private static String basePath;

    public static final String VIEW_PATH = "/upload/";

    private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMdd";

    public static final String COMMON_UPLOAD_PATH = "common";

    /**
     * 文件上传类型定义（用于上传时分子文件夹存储）
     */
    public static enum FileTypeEnum{
        TYPE_NEWS_PC(10, "news/pc"),
        TYPE_NEWS_M(11, "news/m"),
        TYPE_NEWS_CONTENT(12, "news/content"),
        TYPE_BOTTOM(20, "bottom"),
        TYPE_CAROUSEL_PC(30, "carousel/pc"),//轮播图电脑端
        TYPE_CAROUSEL_M(31, "carousel/m"),//轮播图手机端
        TYPE_BUTTON(40, "button"),//首页按钮图片
        TYPE_ABOUT_PC(50, "about/pc"),
        TYPE_ABOUT_M(51, "about/m"),
        TYPE_ABOUT_CONTENT(52, "about/content");

        private Integer code;
        private String path;

        FileTypeEnum(Integer code, String path){
            this.code = code;
            this.path = path;
        }

        public Integer getCode() {
            return code;
        }

        public void setCode(Integer code) {
            this.code = code;
        }

        public String getPath() {
            return path;
        }

        public void setPath(String path) {
            this.path = path;
        }

        public static String getFileType(Integer type){
            if(StringUtils.isBlank(type)){
                return COMMON_UPLOAD_PATH + "/" + getDateStr();
            }
            for(FileTypeEnum e:FileTypeEnum.values()){
                if(type.equals(e.getCode())){
                    return e.getPath() + "/" + getDateStr();
                }
            }
            return null;
        }
    }

    public static String getDateStr(){
        return new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO).format(new Date());
    }

    /**
     * 获取图片存储绝对路径
     * @return
     */
    public static String getUploadPath(){
        String os = System.getProperty("os.name");
        if(os.toLowerCase().startsWith("win")){
            return "C:\\\\fengunion\\website";
        }else{
            return basePath;
        }
    }
}

最终实现效果：

image.png

总结
以上是笔者对ckeditor使用的一些笔记，记录下来希望对读者有用，如有疑问欢迎与我沟通，相互学习，共同进步！