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;
    }
}

此時，就可以將截圖直接粘貼到富文本框中了。