SSM configuration Ueditor to upload images < a >

Recently want to learn something new, so think of using SSM integration Ueditor to achieve image upload! As for why choose Ueditor, the truth you understand! Baidu developed and open source, can customize their own desired content, version updates and more diligent! Next I'm going to record the process of discovery!

1. Download

Click to jump to Ueditor download interface

You can download the Ueditor plugin to the address above and choose the UTF-8 encoded JSP version.

2. Building the Project

A new MAVEN project, first of all, the SSM framework of the basic things to build, if you do not know the SSM basic framework, my blog has detailed construction process can be consulted! I'll be right here!

3. Initialize the editor

I have encountered a lot of problems in this step, I hope you look carefully, avoid too many detours!

The following is the code of my index.jsp page, JS Introduction order is required or will error!

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >This completes the initialization of the ueditor, but in your page it is always impossible to show the edit box for the Rich Text editor. 
Yes, if you are in the Web. XML configuration, the interception content is as follows
<servlet-mapping>          <servlet-name>SpringMVCDemo</servlet-name>          <url-pattern>/ </url-pattern>  </servlet-mapping>  
Then the SPRINGMVC Front controller will intercept all requests, static resources are no exception, so the index.jsp page is not loaded with the JS files you need and pictures and other static resources! So you have to tell SPRINGMVC, let the front controller release the static resources, you have to add the following configuration in the Springmvc.xml
<!--static resource interception issues--    <mvc:resources location= "/ueditor/" mapping= "/ueditor/**"/>
No accident, now you can see the rich Text Editor on the index.jsp page, but at this time the upload image function is still unable to use, you have to do the following configuration!
4. Image upload function
In this, I will not step to follow the source code to introduce the implementation process of the business logic, if you want to learn more, go to the following Daniel blog to see the detailed implementation process! Directly on the code, locate the Config.json file
"Imageactionname": "Uploadimage",/* Perform the action name of the upload picture */"Imagefieldname": "Upfile",/* submitted picture form name */"imagemaxsize": 2048000,/* Upload size limit, Unit B */"imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Upload picture format display */"imagecompres Senable ": true,/* whether to compress the picture, the default is True */" Imagecompressborder ": 1600,/* picture compression longest edge limit */" imageinsertalign ":" None ",/* inserted Picture Floating Way */"Imageurlprefix": "Http://localhost:8080/SpringMVCDemo",/* Image access Path prefix */"Imagepathformat": "/ueditor/jsp/u                                Pload/image/{yyyy}{mm}{dd}/{time}{rand:6} ",/* {filename} will be replaced with the original file name, configure this need to pay attention to the Chinese garbled problem */                                /* {Rand:6} will be replaced by a random number, followed by a random number of digits */* * {time} will be replaced by a timestamp */                                /* {YYYY} will be replaced by four-bit year */*/*/*/////* * Two-digit year */ /* {mm} will be replaced with two-digit month */*/*/*///*//*///*///*/////* * {HH} will replace two bit                    Time */            /* {II} will be replaced with two-bit minutes *////* {SS} will be replaced with two-bit seconds */* illegal characters \ : * ? "< > | */* with body view online documentation: fex.baidu.com/ueditor/#use-format_upload_filename */
change Imageurlprefix, change him to the url! you asked for your project. 

5.


You can find the uploaded images in the following directories:

But is that really enough? Obviously, in the actual development process, we are to the image of the information stored in the database for management, so this implementation is not enough, because of the length of the reason please see the next article!


SSM configuration Ueditor to upload images < a >