SPRINGMVC--Integrated Ueditor (Rich Text editor)

Source: Internet
Author: User

Work needs to use the Ueditor editing text, in the integration with the SPRINGMVC, there are some problems, resulting in the image upload when the following prompts:

Internet access to a lot of relevant information, here briefly recorded, to prevent the future encounter similar problems.

1. Write the controller as follows (this interface is the unified path of ueditor interaction):

Package Com.test.dcdp.controller;import Java.io.ioexception;import java.io.printwriter;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;import Org.springframework.stereotype.controller;import Org.springframework.web.bind.annotation.requestmapping;import Com.baidu.ueditor.ActionEnter, @Controller @requestmapping ("/ueditor") Public classUeditorcontroller {@RequestMapping ("/dispatch")     Public voidConfig (httpservletrequest request, httpservletresponse response) {//Response.setcontenttype ("Application/json"); String RootPath = Request.getsession (). Getservletcontext (). Getrealpath ("/"); Response.setheader ("Content-type","text/html"); Try{String a=Request.getrequesturi (); String exec=NewActionenter (Request, RootPath). exec (); PrintWriter writer=Response.getwriter ();                    Writer.write (exec);                    Writer.flush ();            Writer.close (); } Catch(IOException e) {e.printstacktrace (); }                }}

2. Modify Ueditor configuration file ueditor.config.js (specify background server address) as shown below

Before modification:

    var URL = window. Ueditor_home_url | | Getuebasepath ();     /* *     * Configuration item body. Note that all configuration involving paths here does not omit the URL variable.      */ = {// Add a path to the editor instance, this cannot be commented ueditor_home_url:url                       // Server Unified Request interface path        " php/controller.php "

After modification:

    var URL = window. Ueditor_home_url | | Getuebasepath ();     var ServerURL = "http://localhost/EdwManage/";     /* *     * Configuration item body. Note that all configuration involving paths here does not omit the URL variable.      */ = {// Add a path to the editor instance, this cannot be commented Ueditor_home_url:                      URL        //  Server Unified Request Interface path        , Serverurl:serverurl + "Ueditor/dispatch"

3, modify the Ueditor source code Configmanager.java (Specify the profile path).

Before modification:

    /** Build a Configuration Manager with a given path that requires the Config.properties file to exist in the directory where the address path is located*/    PrivateConfigManager (String rootpath, String contextpath, String uri) throws FileNotFoundException, IOException { RootPath= Rootpath.replace ("\\","/" );  This. RootPath =RootPath;  This. ContextPath =ContextPath; if(Contextpath.length () >0 ) {             This. OriginalPath = This. RootPath +uri.substring (Contextpath.length ()); } Else {             This. OriginalPath = This. RootPath +URI; }                 This. initenv (); }

After modification:

    /** Build a Configuration Manager with a given path that requires the Config.properties file to exist in the directory where the address path is located*/    PrivateConfigManager (String rootpath, String contextpath, String uri) throws FileNotFoundException, IOException { RootPath= Rootpath.replace ("\\","/" );  This. RootPath =RootPath;  This. ContextPath =ContextPath; /*if (contextpath.length () > 0) {this.originalpath = This.rootpath + uri.substring (contextpath.length (        ) );        } else {This.originalpath = This.rootpath + uri; }*/                 This. OriginalPath = RootPath +"Static"+ File.separator +"Lib"+ File.separator +"Ueditor"+ File.separator +"1.4.3"+ File.separator +"JSP"+ File.separator +"controller.jsp"; ///edwmanage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp                 This. initenv (); }

As described above, the main modification of the OriginalPath path, otherwise ueditor's configuration file (ueditor_ Config.json) path is wrong (in case of integration with SPRINGMVC), the reason for stitching the path to the above is because my ueditor-related files are copied (Edwmanage/src/main/webapp/static/lib /ueditor/1.4.3/jsp/controller.jsp) in the path.

4, (if you do not perform this step, after selecting a good picture, click Upload, will prompt: " upload file not found ") because the uploaded files will be Springmvc file upload blocker interception, packaging, so that Baidu Editor can not recognize the file format after receiving files, So replace the spring default Commonsmultiparresolver with the Commonsmultiparresolver we wrote ourselves, and modify the configuration file.

Rewrite commonsmultipartresolver:

Package Com.tianwen.dcdp.common;import Org.springframework.web.multipart.commons.CommonsMultipartResolver;  Public classCommonsmultiparresolver extends Commonsmultipartresolver {@Override Publicboolean Ismultipart (Javax.servlet.http.HttpServletRequest request) {String URI=Request.getrequesturi (); System. out. println (URI); //filter the URI using Baidu Ueditor       if(Uri.indexof ("Ueditor/dispatch") >0{ //The Intercept path here is the controller path System written above . out. println ("Commonsmultipartresolver Release"); return false; } System. out. println ("Commonsmultipartresolver Intercept"); returnSuper.ismultipart (Request); }  }

To modify the SPRINGMVC configuration file Spring-mvc.xml:

<!--modified for our rewrittenCommonsmultiparresolverInstead of spring-provided--<bean id="Multipartresolver"          class="Com.tianwen.dcdp.common.CommonsMultiparResolver"> <!--default encoding-<property name="defaultencoding"Value="Utf-8"/> <!--file size max--<property name="maxuploadsize"Value="10485760000"/> <!--maximum value in memory-<property name="maxinmemorysize"Value="40960"/> </bean>

5, the last configuration upload files to save the directory, modify the Ueditor configuration file (Ueditor_config.json):

Modify the following parameters (that is, the URL path of the configuration upload file, if not configured correctly, the Rich text editor will not display the uploaded picture correctly):

    " Imageurlprefix " " Http://localhost:80/EdwManage " /*  * *    "imagepathformat""/static/upload/ Image/{yyyy}{mm}{dd}/{time}{rand:6}"/** *

Here Imagepathformat is configured as above because in SPRINGMVC, the resource under the static directory is specified as a static resource (other paths will be Springmvc blocked).

The physical path that the file is saved by default is: Web App root path + Imagepathformat.

{YYYY}{MM}{DD} : Save by day

{Time} {Rand:6}: randomly generated file name

There is also a simple workaround:

1, a new Web project (ueditor).

2, the downloaded Ueditor file copy to the new project WebApps directory, can refer to the official website introduction.

3. In the project using Ueditor, modify the Ueditor configuration file (Ueditor.config.js) as follows:

    window. Ueditor_home_url = "http://localhost/ueditor/";     var URL = window. Ueditor_home_url | | Getuebasepath ();     /* *     * Configuration item body. Note that all configuration involving paths here does not omit the URL variable.      */ = {// Add a path to the editor instance, this cannot be commented Ueditor_home_url:                      URL        //  Server Unified Request Interface path        "JSP/controller.jsp"


3, configuration upload file save path, modify (Ueditor_config.json):

  " Imageurlprefix " " Http://localhost:80/ueditor " /*  * *  "imagepathformat""/upload/image/{ Yyyy}{mm}{dd}/{time}{rand:6}"/** *

SPRINGMVC--Integrated Ueditor (Rich Text editor)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.