本次著重講解一下springmvc框架下的整合 summernote編輯器：如下

該編輯器跟知乎平臺上編輯器類似，可以自己在JS控制檔案中進行相關控制元件的控制。

本次summernote版本是：/*! Summernote v0.8.1 | (c) 2013-2015 Alan Hong and other contributors | MIT license */

因本人需要有釋出文章/釋出個人活動/資訊等需要，後臺介面運用的是Metronic框架，請支援正版，謝謝。

本次解決的問題是：

1. 在編輯器中上傳圖片時，需要重寫該js中的onImageUpload的方法，但在百度和廣大平臺上，因為很多人用的summernote版本過老，導致本人做的過程中出現了很多問題，最後在官網的API 和 demo 、GitHub上得以解決，非常感謝樂於分享的你們！
2. 在編輯器中上傳圖片後，如果圖片上傳後不想要，或者想要替換圖片，刪除編輯框中的圖片時，同步刪除本地檔案中上傳的圖片。（解決方法是：在summernote控制檔案中，在removeMedia該方法下加入AJAX對後臺指定url，傳送該圖片名，若本地資源有該檔案，則刪除）

接下來，我們一步一步來講解一下如何配置上的summernote編輯器，和如何重寫它的相關方法

Section 1：安裝和下載配置summernote視覺化編輯器

開啟官網，如圖

該編輯器比較簡潔，易用，如果喜歡功能強大和複雜一些的可以考慮一下百度團隊的UE或者UM。

我們選擇上面的Getting started

來獲取該編輯器所需要載入的檔案，你可以通過多種方式進行載入，本人採用的是直接下載配置

當然，也可以直接使用下cdn

<!-- 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.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
 

該頁面有相關的demo和基礎API，自己參考一下即可

到這裡，我們的相關summernote安裝已經完成，接下來你可以選擇直接使用demo進行一波騷操作了

下面，我們來講解一下如何與springmvc專案進行整合

Section 2：整合springmvc

下面，首先我們開啟自己專案，直接將相關的HTML程式碼放在自己的檢視層即可，通過路徑訪問該檢視，本人的為：

JavaScript相關程式碼為： （callbacks為重新函式，具體請參看summernote.js核心檔案，拉到最下面）

    	$("#summernote_1").summernote({
		      //height:500 //不建議填寫，如果上傳圖片高度比較大，編輯器則不會自動調整高度的
		      focus:true,  //啟動時自動獲取焦點
		      maxHeight:null,  //編輯器最大高度
		      minHeight:500,//編輯器最小高度，會跟隨內容和圖片大小自動調整編輯器高度
			}
	});

在我這JS載入的檔案一共有3個：

zh-CN為中文檔案，如果需要轉換語言，注意在下載的lang資料夾中取出，進行載入，並在summernote.js或summernote.min.js中 將最後的程式碼

改成自己需要的語言檔案的簡介即可。

在這裡我們就已經把該編輯器放入自己的專案中了

Section 3：引入相關jar包、配置springmvc.xml核心檔案

1. 首先我們需要把下面兩個jar放到我們專案的lib目錄下
2. 
3. 配置springmvc檔案

<!-- 配置MultipartResolver -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     	<!-- property 一共有4個屬性
     	maxUploadSize 上傳的最大位元組數，-1代表沒有任何限制
     	maxInMemorySize 讀取檔案到記憶體中最大的位元組數，預設是1024
     	defaultEncoding 檔案上傳頭部編碼，預設是iso-8859-1，注意defaultEncoding必須和使用者的jsp的pageEncoding屬性一致，以便能正常讀取檔案
     	uploadTempDir檔案上傳暫存目錄，檔案上傳完成之後會清除該目錄，模式是在servlet容器的臨時目錄，例如tomcat的話，就是在tomcat資料夾的temp目錄
     	 -->
     	<property name="defaultEncoding" value="UTF-8"></property>
     	<property name="maxUploadSize" value="15728640"></property> <!-- 15MB -->
     </bean>

然後我們就開始在我們的control層/Action控制檔案中編寫相關上傳圖片的執行程式碼了

具體如何，請閱讀本人下篇文章SpringMVC + summernote 重寫回調函式onImageUpload方法（2）