首先佈置編輯器
<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即可以多選了）