Spring and Ueditor Combine

Objective

Spring Festival bored, go to get a rich text editor, and then Baidu, a lot of said Baidu Ueditor good, and then go to the official website according to document to get it, is quite simple and easy to use. And then want to combine this thing into one of their own spring project, sure enough, or in the point of uploading pictures GG, Baidu Google once again, now can only be done before and after the upload picture can be used, if there is a JSP Ueditor cross-domain can upload pictures to tell younger brother a sound, Here is a summary of the various problems encountered in the past few days.

PS: Say Blog Park here the Rich Text editor seems to be able to ....

Brief introduction

Ueditor is Baidu developed an open source HTML Rich Text Editor, the interface is really good-looking, the document aspect is complete, although cross-domain upload this piece left a pit let us play the Imagination ヾ (￣▽￣), so in order to prevent ueditor have pit, need to change Ueditor source code, Here is recommended to download Ueditor source code into their own projects, the source of Ueditor is very simple, as long as the tracking debug is easy to see the problem.

The spring project presented here integrates spring security and thymeleaf, builds a controller built with MAVEN, Ueditor's back-end controllers into spring MVC, and originally wanted to use Servlets to find a lot of information, I don't see the Spring MVC Project can integrate the source servlet, but spring boot can register the servlet via @servletcomponentscan, and the spring boot integration ueditor is most convenient, basically no pit, All the way, I've tried that. Here's how spring projects integrate Ueditor backstage.

Body

Ueditor download installs what does not say, direct.

Front-End file directory:

　　

Put the source of Ueditor backstage into your project:

　　

Add dependencies for Ueditor background:

　　

<Dependency>            <groupId>Commons-fileupload</groupId>            <Artifactid>Commons-fileupload</Artifactid>            <version>1.3.1</version>        </Dependency>        <Dependency>            <groupId>Commons-io</groupId>            <Artifactid>Commons-io</Artifactid>            <version>2.4</version>        </Dependency>        <Dependency>            <groupId>Commons-codec</groupId>            <Artifactid>Commons-codec</Artifactid>            <version>1.10</version>        </Dependency>        <Dependency>            <groupId>Org.json</groupId>            <Artifactid>Json</Artifactid>            <version>20160810</version>        </Dependency>

Because we use spring MVC, so Ueditor's controller.jsp to change into controller form, basically copy ueditor controller code.

1 @Controller2  Public classUeditorcontroller {3@RequestMapping ("/ued/config")4      Public voidService (HttpServletRequest request, httpservletresponse response)throwsunsupportedencodingexception {5 6Request.setcharacterencoding ("Utf-8");7Response.setheader ("Content-type", "text/html");8String RootPath =request.getsession ()9. Getservletcontext (). Getrealpath ("/");Ten  One         Try { AString exec =NewActionenter (Request, RootPath). exec (); -PrintWriter writer =Response.getwriter (); - writer.write (exec); the Writer.flush (); - writer.close (); -}Catch(IOException e) { - e.printstacktrace (); +         } -     } +  A}

Controller

Then we change the Ueditor backend interface and change it to our controller.

　　

Here, if we try to use ueditor, there will be no background configuration errors found, This is because the default controller.jsp and Config.json is the same directory, ueditor the background code can not find Config.json sake, here we find ueditor backstage source ConfigManager, will Getconfigpath () method change, here I put Config.json to Maven Src/main/resources, that is, classpath path, if there are different, then the corresponding change can be.

　　

In this way, Ueditor is to find Config.json, but upload image function still not, here is mainly because spring MVC in controller injected request object and Ueditor with Commons-fileupload conflict, Causes Commons-fileload Unable to get the file byte stream inside the request, through debug (so to download the source code), Then we just need to change the upload file method of the Com.baidu.ueditor.upload.BinaryUploader class.

Here I have mainly changed the key fileitemiterator iterator = upload.getitemiterator (request); Try to keep the source code as it looks.

 Public Static FinalState Save (httpservletrequest request, Map<string, object>conf) {        BooleanIsajaxupload = Request.getheader ("X_requested_with")! =NULL; if(!servletfileupload.ismultipartcontent (Request)) {            return NewBasestate (false, appinfo.not_multipart_content); } servletfileupload upload=NewServletfileupload (Newdiskfileitemfactory ()); if(isajaxupload) {upload.setheaderencoding ("UTF-8" ); }        Try{multiparthttpservletrequest multipartrequest=(multiparthttpservletrequest) request; Multipartfile Multipartfile= Multipartrequest.getfile (Conf.get ("FieldName"). toString ());//Fileitemiterator iterator = upload.getitemiterator (request);////While (Iterator.hasnext ()) {//FileStream = Iterator.next ();////if (!filestream.isformfield ())//Break ;//fileStream = null;//            }            if(Multipartfile = =NULL) {                return NewBasestate (false, Appinfo.notfound_upload_data); } String Savepath= (String) conf.get ("Savepath"); String Originfilename=Multipartfile.getoriginalfilename (); String suffix=Filetype.getsuffixbyfilename (originfilename); Originfilename= originfilename.substring (0, Originfilename.length ()-suffix.length ()); Savepath= Savepath +suffix; LongMaxSize = ((Long) conf.get ("MaxSize") . Longvalue (); if(!validtype (suffix, (string[]) conf.get ("Allowfiles"))) {                return NewBasestate (false, Appinfo.not_allow_file_type); } Savepath=Pathformat.parse (Savepath, originfilename); String PhysicalPath= (String) conf.get ("RootPath") +Savepath; InputStream is=Multipartfile.getinputstream (); State Storagestate=Storagemanager.savefilebyinputstream (IS, PhysicalPath, maxSize);            Is.close (); if(Storagestate.issuccess ()) {Storagestate.putinfo ("url", Pathformat.format (Savepath)); Storagestate.putinfo ("Type", suffix); Storagestate.putinfo ("Original", Originfilename +suffix); }            returnstoragestate; } Catch(IOException e) {}return NewBasestate (false, Appinfo.io_error); }    Private Static Booleanvalidtype (String type, string[] allowtypes) {List<String> list =arrays.aslist (allowtypes); returnlist.contains (type); }

View Code

Here, Ueditor can upload files, there may be a little pit is the path to save the file and return to the front of the path is not very consistent, this everyone debug, In the Config.json can modify the file upload save path and return URL prefix configuration, the source in the hand, there is nothing wrong can change their own. In addition, because my project is useful for spring security, Response's X-Frame-Options default is deny, so that when Ueditor upload pictures of the pit-daddy IFrame shows no pictures. Here I tried to setheader in the controller, the result is that the front end says X-Frame-Options have two values, it's a day dog. So I simply turned off the function of spring security, and you know how to change the header value of the controller to tell me.

Http.headers (). Frameoptions (). Disable ()

Spring and Ueditor Combine