CKeditor粘贴截图

CKeditor粘贴截图

CKeditor默认是支持截图粘贴的，不过需要我们进行配置

一、CKeditor配置

在CKeditor的config.js中加入以下配置

// 配置粘贴的图片的上传路径
config.uploadUrl="/home/uploadPasteImage";
  
// 添加图片粘贴插件
config.extraPlugins="imagepaste";

二、后台代码

@PostMapping(value = "/uploadPasteImage")
public String uploadPasteImage(@RequestParam("upload") MultipartFile[] file, HttpServletRequest request,
                               HttpServletResponse response, HttpSession session) {

  LOG.info("开始上传粘贴的图片...");

  response.setCharacterEncoding("UTF-8");

  String result = "";
  try {
    for (int i = 0; i < file.length; i++) {
      // 上传图片，返回上传的图片的图片名
      String fileName = ImageUtil.uploadImage(imgTempSavePath, file[i]);

      // 图片的访问路径
      String imgUrl = imgVisitPath+fileName;

      // 上传成功的json
      result = "{\"uploaded\" : 1, \"fileName\" : \""+fileName+"\", \"url\":\""+imgUrl+"\" }";

      LOG.info("图片上传成功...");
      break;
    }
  } catch (Exception e) {

    LOG.error("图片上传失败，error：{}" + e.getMessage());

    // 上传失败的json
    result = "{\"uploaded\" : 1, \"fileName\" : \"image\", \"url\":\"image\" , \"error\" : { \"message\":\"图片上传失败\" } }";
  }

  return result;
}

ImageUtil.java

import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;

/**
 * 图片工具类
 **/
public class ImageUtil {

    private final static Logger LOG = LoggerFactory.getLogger(ImageUtil.class);

    /**
     * 上传图片工具类，返回图片名
     * @return
     */
    public static String uploadImage(String tempSavePath, MultipartFile imgFile) throws Exception {

        Date date = new Date();
        String fileName = ((Long)date.getTime()).toString() + imgSuffix(imgFile.getOriginalFilename());

        FileOutputStream fos = null;
        try {
            String path = FileUtil.createChildPath();
            // 创建文件
            File file = FileUtil.createFile(tempSavePath+path, fileName);
            LOG.info("图片名：{}", file.getName());

            fos = new FileOutputStream(file);
            IOUtils.copy(imgFile.getInputStream(), fos);
            LOG.info("图片上传成功");

            return path+file.getName();
        } catch (IOException ex) {
            ex.printStackTrace();
            LOG.error("文件创建失败");
            throw ex;
        } catch (Exception ex) {
            ex.printStackTrace();
            LOG.info("图片上传失败");
            throw ex;
        } finally {
            try {
              if(fos!=null) {
                fos.close();
              }
            } catch(Exception e) {
              e.printStackTrace();
            }
        }
    }

}

FileUtil.java

public class FileUtil {

    private final static Logger LOG = LoggerFactory.getLogger(FileUtil.class);
  
    /**
     * 生成文件
     * @param parentPath
     * @param fileName
     * @return
     * @throws IOException
     */
    public static File createFile(String parentPath, String fileName) {

        File parentFile = new File(parentPath);

        // 如果父路径不存在，就先创建父路径
        if(!parentFile.exists()) {
            parentFile.mkdirs();
        }

        // 创建文件
        File file = new File(parentPath + fileName);
        try {
            file.createNewFile();
        } catch (IOException e) {
            e.printStackTrace();
            LOG.error("文件创建失败");
        }

        return file;
    }
}

此时，就可以将截图直接粘贴到富文本框中了。