CKeditor粘贴截图

博客介绍了CKeditor实现粘贴截图的方法。CKeditor默认支持截图粘贴,但需配置。一是在CKeditor的config.js中加入相关配置,二是编写后台代码,如ImageUtil.java和FileUtil.java,完成后即可将截图直接粘贴到富文本框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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();
            }
        }
    }
    
	/**
     * 获取图片的格式,带点,例如:.jpg
     * @param imgName
     * @return
     */
    public static String imgSuffix(String imgName) {

        if(StringUtils.isEmpty(imgName)) {
            LOG.error("图片名为空");
            throw new RuntimeException("图片名为空");
        }

        return imgName.substring(imgName.lastIndexOf("."));
    }

}

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值