SpringMVC + summernote實現可視化編輯器

本篇文章給大家分享的是SpringMVC + summernote實現可視化編輯器的操作詳解，內容挺不錯的，希望可以協助到有需要的朋友。本次著重講解一下springmvc架構下的整合 summernote編輯器：如下

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

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

與目前官網版本方法基本一致首先，關於summer可視化編輯器，官網是https://summernote.org/

本次解決的問題是：

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目錄下

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控制檔案中編寫相關上傳圖片的執行代碼了