開發項目時,遇到summernote,打開本地文件夾時,非常的慢,以下是解決辦法:
找到summernote.min.js
accept="image/*"
替換為:
accept="image/jpg,image/jpeg,image/webp,image/png,image/svg,image/gif"
修改位置部分
如果不行,請清除一下瀏覽器緩存
以下是實際開發效果圖
項目效果圖
----------------------------------------------我是分割線------------------------------------------
附summernote+springboot整合代碼:
html需要引入(這個就自己下載喏)
<link href="../../css/plugins/summernote/summernote.css" rel="stylesheet" />
<link href="../../css/plugins/summernote/summernote-bs3.css" rel="stylesheet" />
<script src="../../js/plugins/summernote/summernote.min.js" type="text/javascript"></script>
<script src="../../js/plugins/summernote/summernote-zh-CN.js" type="text/javascript"></script>
內容區(我相信css樣式難不倒聰明的你)
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-12" style="width:550px">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h1>公司簡介</h1>
<button id="cancel" class="btn btn-warning btn-xs m-l-sm" onclick="cancelEdit()" type="button">放棄本次編輯</button>
<button id="edit" class="btn btn-primary btn-xs" onclick="profileEdit()" type="button">編輯</button>
<button id="save" class="btn btn-primary btn-xs" onclick="profileSave()" type="button">保存</button>
</div>
<div class="ibox-content no-padding" id="eg">
<div id="summernote">
<h3>親愛的用戶,您好:</h3>
<br/>
<p> 開始編輯您的內容吧.</p>
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
相關js函數(提示彈出框用的是 sweetAlert,自行百度)
$(document).ready(function() {
$('#summernote').summernote({
lang: 'zh-CN', // default: 'en-US'
focus:true,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
});
function sendFile(file, editor, welEditable){
var filename = false;
try {
filename = file['name'];
} catch (e) {
filename = false;
}
if (!filename) {
$(".note-alarm").remove();
}
//以上防止在圖片在編輯器內拖拽引發第二次上傳導致的提示錯誤
var ext = filename.substr(filename.lastIndexOf("."));
ext = ext.toUpperCase();
var timestamp = new Date().getTime();
var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
//name是文件名，自己隨意定義，aid是我自己增加的屬性用于區分文件用戶
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "/logistics/common/picSave", //圖片上傳出來的url，返回的是圖片上傳后的路徑，http格式
cache: false,
contentType: false,
processData: false,
success: function(url) {
//data是返回的hash,key之類的值，key是定義的文件名,把圖片放到編輯框中
editor.insertImage(welEditable, url);
// $('#summernote').summernote('insertImage', url); //這種方式有問題
},
error: function(){
swal({
type:"warning",
title:"",
text: "上傳失敗",
confirmButtonText: '知道的啦'
});
}
});
}
//編輯, 初始化組件, 加上圖片上傳初始化
function profileEdit(){
$("#eg").addClass("no-padding");
$('#summernote').summernote({
lang: 'zh-CN', // default: 'en-US'
focus:true,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
}
//保存, 銷毀組件
function profileSave(){
data = new FormData();
$("#eg").removeClass("no-padding");
var aHTML = $('#summernote').code();//獲取內容
data.append("content", aHTML);
$('#summernote').destroy(); //銷毀
$.ajax({
data: data,
type: "POST",
url: "/company/picSave", //圖片上傳出來的url，返回的是圖片上傳后的路徑，http格式
cache: false,
contentType: false,
processData: false,
success: function(res) {
if (res.code === "0"){
swal({
type:"success",
title:"",
text: res.msg,
confirmButtonText: '那必須的'
});
} else {
swal({
type:"warning",
title:"",
text: "啊哦,保存失敗",
confirmButtonText: '朕知道了'
});
}
}
});
}
//取消, 銷毀組件
function cancelEdit(){
$("#eg").removeClass("no-padding");
$('#summernote').destroy(); //銷毀
self.location.reload(); //取消時重新刷新界面
}
springboot后臺參考代碼(如果有需要對圖片進行壓縮或者加水印需求的同學請自行百度哦):
類上的注釋使用:@RestController
/**
* @param file
* @return
* @throws IOException
*/
@RequestMapping(value = "/common/picSave", produces = "text/html;charset=UTF-8", method = RequestMethod.POST)
@ResponseBody
public String commonPicSave(@RequestParam("file") MultipartFile file) throws IOException {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy_MM");
String file_name = sdf.format(new Date());
String fileName;
String suffixName;
OutputStream out = null;
InputStream in = null;
String _path = "";
String path = "c:\\myPath"+ file_name + "/";
if (!file.isEmpty()) {
fileName = file.getOriginalFilename();
suffixName = fileName.substring(fileName.lastIndexOf("."));
fileName = UUID.randomUUID() + "_" + new Random().nextInt(10000) + suffixName; //重新命名
// 檢測是否存在目錄
String filePath = path + fileName;
File dest = new File(filePath);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
out = new FileOutputStream(new File(path, fileName));
in = file.getInputStream();
int length;
byte[] buf = new byte[1024];
while ((length = in.read(buf)) != -1) {
out.write(buf, 0, length);
}
in.close();
out.close();
_path = type + "/" + file_name + "/" + fileName;
ShiroUtils.setSessionAttribute(type, "/" + _path); // 將圖片放到session中
System.out.println("/" + _path);
}
return baseUrl + _path;
}
開發中遇到的問題,分享一下,如果對您有幫助,那便是最好;如果有錯,還望多多指出
