Baidu Rich Text Editor UEditor1.3 uploads image attachments and so on, ueditor1.4.3

Source: Internet
Author: User

Baidu Rich Text Editor UEditor1.3 uploads image attachments and so on, ueditor1.4.3

Today, I have been uploading images in the editor of one of my projects. I am using Baidu UEditor 1.3. Now I have 1.4, but it is quite new, however, there are no tutorials for uploading images on the official website, but there is very little information on the Internet. I 've been tossing around for a long time and I 've read some questions about uploading images from previous versions, finally, we got it done.

Let's talk about the configuration of my project first.

The SSH framework is used: struts2.3.16 spring3.2.5 hibernate3.3.2

Ueditor 1.3-utf-8-jsp Edition

Jdk 1.7

The development tool uses myeclipse10.7.

Paste the project structure directly. The picture is a little p, but the main things are


This is the file in the ueditor folder.


You need to put the commons-fileupload-1.2.2.jar and ueditor. jar two jar packages under the lib folder; note that the commons-fileupload-1.2.2.jar in struts2 also has, do not conflict

Here, js errors are reported in myeclipse. You can delete all js errors directly, but be careful not to delete the real errors, such as jsp errors, it may be that the class reference path is wrong. Please modify it.

Here, I will not talk about how to reference the editor on the jsp page. I will go to the UEditor official website to find the editor, which is more detailed. I will mainly talk about how to upload images and attachments. These are similar, these are not described on the official website.


After deployment, a part of the uploaded files will display a path error, unknown path, and cannot be found. This is because struts2 is used and intercepted by StrutsPrepareAndExecuteFilter, the default interceptor of struts2. Therefore, we need to write an interceptor to upload images and attachments without blocking them.

Paste the code of my interceptor below

Package com. phn. interceptor; import java. io. IOException; import javax. servlet. filterChain; import javax. servlet. servletException; import javax. servlet. servletRequest; import javax. servlet. servletResponse; import javax. servlet. http. httpServletRequest; import org. apache. struts2.dispatcher. ng. filter. extends; public class UEditorFilter extends {public void doFilter (ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req; // obtain urlString url = request. getRequestURI (); if ("/XXX/ueditor/jsp/imageUp. jsp ". equals (url) {// here XXX represents the project name, imageUp. jsp is the jsp for uploading images in ueditor, indicating that this jsp should not be filtered. Similarly, attachments and other uploads are the same. // use the interceptor chain for the editor. doFilter (req, res);} else {// use the default interceptor super. doFilter (req, res, chain );}}}

The above code is relatively simple and I will not elaborate on it. I believe you can understand the general meaning. 

Below is the modification of web. xml, the original web. xml

<filter><filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping>

Modified web. xml

<Filter> <filter-name> struts2 </filter-name> <filter-class> com. phn. interceptor. UEditorFilter </filter-class> // the interceptor configured here is my own </filter> <filter-mapping> <filter-name> struts2 </filter-name> <url-pattern>/* </url-pattern> </filter-mapping>

Finally, deploy it in tomcat and run the test as follows:


Here I mainly refer

Http://bbs.csdn.net/topics/390678241? Page = 1 # post-397864644

Http://download.csdn.net/detail/xiangyangsanren/4849558



How can Baidu's Ueditor Rich Text Editor extract only uploaded attachments or images in net?

This should be done by changing the JS or adjustment mode. Let's talk about the adjustment mode. Now there are two modes in the online editor, one is FULL and the other is SIMPLE, it is recommended that you paste it to the software's API specification. You must have answers in this regard.

Baidu Rich Text Editor Ueditor uploads an error using a local image

Hello, I have encountered the same problem as you. You don't have to worry about it first. This problem is like this. Baidu has a problem for a long time, and there are all kinds of problems, sometimes it takes a long time to refresh a few times, or try again later ,,
 

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.