SpringMVC + summernote implements visual editor

This article shares with you a detailed explanation of the operation of the visual editor implemented by SpringMVC + summernote. The content is quite good. I hope it can help friends in need. This time we will focus on the integrated summernote editor under the springmvc framework: as follows

This editor is similar to the editor on the Zhihu platform and can be controlled by yourself in JS Control related controls in the file.

This summernote version is: /*! Summernote v0.8.1 | (c) 2013-2015 Alan Hong and other contributors | MIT license */

with the current The method of the official website version is basically the same. First of all, regarding the summer visual editor, the official website is https://summernote.org/

The problem solved this time is:

1. When uploading images in the editor, you need to rewrite the onImageUpload method in the js. However, on Baidu and other platforms, because the version of summernote used by many people is too old, As a result, many problems occurred during my work, and they were finally solved on the official website's API, demo, and GitHub. Thank you very much for sharing!

2. After uploading the image in the editor, if you don’t want the image after uploading, or you want to replace the image , when deleting the picture in the edit box, the picture uploaded in the local file will be deleted simultaneously. (The solution is: in the summernote control file, add AJAX under the removeMedia method to specify the url in the background and send the image name. If the local resource has the file, delete it)

Next, we will explain step by step how to configure the summernote editor and how to rewrite it

Section 1: Installation And download and configure summernote visual editor

##Open the official website, as shown in the figure

This editor is relatively simple and easy to use. If you like something more powerful and complex, you can consider Baidu team's UE or UM.

We choose the above Getting started

to get the files that need to be loaded by the editor. You can do this in a variety of ways To load, I use the direct download configuration

Of course, you can also directly use 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>

This page has related demo and Basic API, you can refer to it yourself

At this point, our relevant summernote installation has been completed. Next, you can choose to use the demo directly to perform a wave of cool operations

Next, we will explain Let’s talk about how to integrate with the springmvc project

Section 2: Integrate springmvc

##Next, first we open our own project and directly add the relevant The HTML code can be placed in its own view layer, and the view can be accessed through the path. My own code is:

The relevant JavaScript code is: (callbacks are new functions, please refer to summernote for details. js core file, pull it to the bottom)

    	$("#summernote_1").summernote({
		      //height:500 //不建议填写，如果上传图片高度比较大，编辑器则不会自动调整高度的
		      focus:true,  //启动时自动获取焦点
		      maxHeight:null,  //编辑器最大高度
		      minHeight:500,//编辑器最小高度，会跟随内容和图片大小自动调整编辑器高度
			}
	});

There are 3 files loaded in my JS:

zh-CN is a Chinese file. If you need to convert the language, please pay attention Take out the downloaded lang folder, load it, and change the final code

in summernote.js or summernote.min.js to what you need An introduction to the language file is sufficient.

Here we have put the editor into our own project

Section 3: Introduce relevant jar packages and configure the springmvc.xml core file

First we need to put the following two jars into the lib directory of our project

2. 

Configuring the springmvc file

3. <!-- 配置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>

Then we start writing the execution code related to uploading images in our control layer/Action control file

The above is the detailed content of SpringMVC + summernote implements visual editor. For more information, please follow other related articles on the PHP Chinese website!