summernote对上传图片，以及对图片大小细节，删除图片移除服务器资源等处理的比较完美。
整合过程，summernote的官网https://summernote.org/getting-started/，官网的文档比较详细，基本都能看懂。
工具：spring boot2.1.0，前端bootstrap4.0。
一、下载源码（从官网下）
导入项目，在页面引用这几项，直接复制即可，也可引用本地库
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>二、初始化summernote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>当然我们在这里可以初始化一些summernote的参数，比如
$('#summernote').summernote({
placeholder: '我是千古',
tabsize: 2,
height: 400, //高度，根据需要去设
lang: 'zh-CN', //zh-CN为中文文件，如果需要转换语言，注意在下载的lang文件夹中取出并加载
focus: true
});到这里页面就会显示
三、上传图片至服务器
我这里还是将图片上传至本地虚拟路径，在summernote的官网我们可以看到覆盖图片上传的方法
这里我们使用第一种，前端js代码，初始化文本，并且回调覆盖上传方法
<script>
$('#summernote').summernote({
placeholder: '千古',
height: 400,
lang: 'zh-CN',
focus: true,
callbacks:{ //回调函数，覆盖上传方法onImageUpload
onImageUpload: function(files) {
sendFile(files[0]);
}
}
});
function sendFile(files) {
data = new FormData();
data.append("files", files);
$.ajax({
data: data,
dataType: 'json',
type: "POST",
url: "/img", //上传路径
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
$('#summernote').summernote('insertImage', data.filename);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
</script>后台方法
@ResponseBody
@RequestMapping("/img")
public Map<String,Object> uploadImgQiniu(@RequestParam("files") MultipartFile
file) throws IOException {
Map<String,Object> map = new HashMap<String,Object>();
if(!file.isEmpty()) {
System.out.println(file.getOriginalFilename());
String fileName = file.getOriginalFilename();
// 获取后缀
//String suffixName = fileName.substring(fileName.lastIndexOf("."));
// 文件上传的路径
String filePath = "C:/Users/ASUS/Desktop/file/";
// fileName处理
fileName = filePath+fileName;
// 文件对象
File dest = new File(fileName);
// 创建路径
if(!dest.getParentFile().exists()){
dest.getParentFile().mkdir();
}
try {
//保存文件
file.transferTo(dest);
} catch (IOException e) {
e.printStackTrace();
}
}
map.put("filename", "/images/"+file.getOriginalFilename());
return map;
}以下就是最终效果
额，大概就结束了,
如有侵权，请联系我删除
千古 QQ:1466877104