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