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中將最後的程式碼

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

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

3. Section 3：引入相關jar套件、設定springmvc.xml核心檔案

首先我們需要把下面兩個jar放到我們專案的lib目錄下##################### ######設定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實作視覺化編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！