summernote编辑器批量上传图片

首先布置编辑器

<link href="__CSS__/plugins/summernote/summernote.css" rel="stylesheet">
<link href="__CSS__/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<form method="post" class="form-horizontal" action="/admin/worksmanage/worksaddprocess" enctype="multipart/form-data">
<div class="summernote"></div> //编辑器的容器
</form>
<button onclick="saveform()" class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
<!-- SUMMERNOTE -->
<script src="__JS__/plugins/summernote/summernote.min.js"></script>
<script src="__JS__/plugins/summernote/summernote-zh-CN.js"></script>

<script>
$(document).ready(function () {

 

//初始化编辑器

$('.summernote').summernote({
lang: 'zh-CN',
height: 200,
//默认是base64上传，现在改为选中图片后则异步上传到服务器
onImageUpload: function(files, editor, welEditable) {
var files_length = files.length;
//此处循环上传每一个图片
for(var i=0;i<files_length;i++){
sendFile(files[i], editor, welEditable);
}

},
});

 

//$('.summernote').code(''); //编辑器初始化后默认有一些p元素，此处为清空编辑器，在编辑页面则不需要此操作

});

//异步批量上传图片

function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "/admin/worksmanage/imageupload", //服务器端上传方法
cache: false,
contentType: false,
processData: false,
success: function(url) {
$(".note-editable").append(url); //将服务器返回的值加入编辑器容器里
}
});
}

 

 

//在点击提交按钮之前，将编辑器所有内容赋值于一个隐藏元素，方便服务器端接收编辑器内容

var saveform = function(){
var $form = $("form.form-horizontal");
var editor = "<input type='hidden' name='content' value='" + $('.summernote').code() + "' />";
$form.append(editor);
$form.submit();
};

 

 

ps:注意去把编辑器的上传选框改为可以多选（将plugins/summernote/summernote.min.js里的

<input class="note-image-input" type="file" name="files" accept="image/*" /> 改为 <input class="note-image-input" type="file" name="files" accept="image/*" multiple />，增加了一个multiple即可以多选了）