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;
}
}
此时,就可以将截图直接粘贴到富文本框中了。