SPRINGMVC + summernote Implementation of visual editor

This article to you to share is SPRINGMVC + summernote implementation of the visual editor of the operation of the detailed, the content is very good, I hope to help the need for friends. This session focuses on the integrated Summernote editor under the SPRINGMVC framework:

The editor is similar to the editor on the platform and can control the control of the relevant controls in the JS control file.

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

and the current official website version of the method is basically consistent first, about summer visual editor, the official website is https://summernote.org/

The problem with this solution is:

1. In the editor to upload pictures, you need to rewrite the JS in the Onimageupload method, but in Baidu and the vast majority of platforms, because many people use the summernote version too old, resulting in the process of I do have a lot of problems, finally in the official website of the API and demo, On GitHub, thank you so much for sharing!

2. After uploading a picture in the editor, if you don't want it after uploading it, or want to replace it, delete the picture in the edit box and delete the uploaded image from the local file. (The workaround is: in the Summernote control file, under Removemedia the method to add Ajax to the background specified URL, send the picture name, if the local resources have the file, then delete)

Next, let's take a step-by-step look at how to configure the Summernote editor, and how to override it in a related way

Section 1: Installation and download Configuration summernote visual Editor

Open the official website,

The editor is relatively concise, easy to use, if you like the powerful and complex some can consider the Baidu team's UE or UM.

we choose the above Getting started

To get the files that the editor needs to load, you can load them in a variety of ways, I'm using a direct download configuration

Of course, you can also use the next CDN directly

<!--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 the relevant demo and basic API, you can refer to

Here, our relevant Summernote installation has been completed, then you can choose to use the demo directly for a wave of Sao operation

Below, let's explain how to integrate with the SPRINGMVC project.

Section 2: Consolidating SPRINGMVC

Below, we first open our own project, directly put the relevant HTML code in its own view layer, through the path to access the view, I am:

The JavaScript-related code is: (Callbacks is a re-function, see summernote.js Core file, pull to the bottom)

    $ ("#summernote_1"). Summernote ({      //height:500//Not recommended, if the upload image height is relatively large, the editor will not automatically adjust the height of the      focus:true,  // Automatically get focus maxheight:null at startup      ,  //MAX height of the editor      minheight:500,//the minimum height of the editor, will automatically adjust the editor height with content and picture size}});

In my this JS loaded file a total of 3:

ZH-CN is a Chinese file, if you need to convert the language, be careful to remove it in the downloaded Lang folder, load it, and in Summernote.js or summernote.min.js the final code

Change to the language file you need.

Here we have put the editor in our own project.

Section 3: Introducing the relevant jar package, configuring the Springmvc.xml core file

1. First we need to put the following two jars into the Lib directory of our project

3. Configuring the Springmvc File

<!--configuration Multipartresolver--     <bean id= "Multipartresolver" class= " Org.springframework.web.multipart.commons.CommonsMultipartResolver ">     <!--property has 4 properties     Maxuploadsize The maximum number of bytes uploaded, 1 means there is no limit     maxinmemorysize read the file to the maximum number of bytes in memory, the default is the     defaultencoding file upload header encoding, The default is iso-8859-1, note that defaultencoding must be consistent with the pageencoding properties of the user's JSP, so that the file can be read     uploadtempdir file Upload staging directory, the file upload will be cleared when the directory is completed. The schema is a temporary directory in the servlet container, such as Tomcat, which is the temp directory in the Tomcat folder--     <property name= "defaultencoding" value= " UTF-8 "></property>     <property name=" maxuploadsize "value=" 15728640 "></property> <!-- 15MB-     </bean>

Then we begin to write the execution code of the relevant upload image in our control layer/action controls file