Home > Developer > Web Develop
~ ~ After a morning's time, finally put out the Ueditor editor, only record
# The way it was done
1, first download the corresponding plugin on the official website "attached: http://ueditor.baidu.com/website/download.html"
I am using the Java language , the framework is Ssm+maven
2, unzip the file, create a new folder under the root of your project Ueditor, copy and paste the utf8-jsp file into the Ueditor folder
3, create a new ueditortest.jsp, the index.html in the folder in the HTML code copied paste into this JSP, the introduction of the following four JS and CSS
<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><%@include File="/web-inf/jsp/common/tag.jsp" %><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head> <title>Full Demo</title> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"/> <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "${pagecontext.request.contextpath}/assets/js/jquery.min.js"></Script> <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "${pagecontext.request.contextpath}/ueditor/ueditor.config.js"></Script> <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "${pagecontext.request.contextpath}/ueditor/ueditor.all.min.js"> </Script> <!--It is recommended to manually add the language, to avoid under IE sometimes because the load language failure causes the editor to fail to load - <!--the language file loaded here will overwrite the language type you added in the configuration item, such as the English you configured in the configuration item, the Chinese is loaded here, and the last is Chinese . - <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "${pagecontext.request.contextpath}/ueditor/lang/zh-cn/zh-cn.js"></Script> <styletype= "Text/css">Div{width:100%; } </style></Head><Body> <Div> <H1>Full Demo</H1> <textareaname= "Content"ID= "Editor"style= "width:820px;height:200px;"></textarea></Div>
<script type= "Text/javascript" >
Instantiation Editor
var UE = ue.geteditor (' editor ');
</script
</ Body > </ HTML >
4, I use MAVEN management jar, so the first four jar/ueditor/jsp/lib under the Pom.xml introduced, Ueditor-1.1.2.jar can be placed in the/web-inf/Lib folder (no new one), and Bulidpath
5. Modify the two code in the configuration file Ueditor.config.js
"The first place to change:" var URL = window. Ueditor_home_url | | "/xxxxx/ueditor/"; XXXXX for your project name, which is the path to the Ueditor folder relative to the Project window. Ueditor_config = { //"need to change the second place:" , ServerURL: "/xxxx/upload/enter"//need to modify the second path, XXXX is also your project name,
Upload is the access path for the controller you want to create, enter is the entry method, and the controller specific code is below
* 6, this is very important, Config.json file path must follow the above 5 ServerURL: "/xxxx/upload/enter" corresponding, placed in the root Path upload folder (no new folder), Otherwise, will always error: Request background configuration error, upload function will not work properly!
Config.json contents According to the actual situation to modify the Config.json file three parameters
"Imageactionname": "Uploadimage",
"Imagefieldname": "Upfile",
"Imagepathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
If the uploaded file (picture or attachment) location is not in your project, you can add a path prefix in "Imageurlprefix": "To access the
7, next to create a new Controller.java (due to ueditor to the scheme, the Java code written to the controller.jsp, in order to facilitate, build this Controller.java file), as Ueditor upload pictures and attachments of the entry function.
There are two points to note:
(1) in the above code, ServerURL: The/upload and/enter of "/xxxx/upload/enter" correspond to the mapper in the code below
(2) The code below is pasted in controller.jsp to make a slight change.
@Controller @requestmapping ("/upload") public class Uploadcontroller { @RequestMapping (value= "/enter", method= requestmethod.get) public void Enterue (httpservletrequest request,httpservletresponse response) { try { Request.setcharacterencoding ("Utf-8"); } catch (Unsupportedencodingexception e) { e.printstacktrace (); } Response.setheader ("Content-type", "text/html"); String RootPath = Request.getsession (). Getservletcontext (). Getrealpath ("/"); try { String exec = new Actionenter (request, RootPath). exec (); PrintWriter writer = Response.getwriter (); Writer.write (exec); Writer.flush (); Writer.close (); } catch (IOException e) { e.printstacktrace ();}} }8, you can visit ueditortest.jsp, click on multi-image upload, will appear this way
If an error occurs, the path configuration in the 5th step ueditor.config.js is wrong
9, began to write the upload pictures and attachments of the code
First, add the following code to the <script></script> tag in ueditor.jsp
Instantiation Editor var UE = ue.geteditor (' editor ');//upload pictures and attachments according to different action UE.EDITOR.PROTOTYPE._BKGETACTIONURL = UE. EDITOR.PROTOTYPE.GETACTIONURL; Ue. EDITOR.PROTOTYPE.GETACTIONURL = function (action) { if (action = = ' Uploadimage ') { return ' ${ Pagecontext.request.contextpath}/upload/uploadimage '; } else if (action = = ' UploadFile ') { return ' ${pagecontext.request.contextpath}/upload/uploadfile '; } else { return This._bkgetactionurl.call (this, action); } }and write the corresponding method in the controller.
/** * ueditor How to upload images * @param upfile file to upload images * @param request * @param response * @return */@RequestMapping (value= "/uploadimage", Method=requestmethod.post) @ResponseBody public Map<String, Object>uploadnewsimg (@RequestParam (value= "Upfile", Required=false) multipartfile upfile,httpservletrequest request, HttpServletResponse response) {Date date = new Date (); String Uploadpath = "\\upload\\file\\" +new SimpleDateFormat ("yyyy\\mm\\"). Format (date); String path = Uploadpath; Picture suffix String last = upfile.getoriginalfilename (). substring (Upfile.getoriginalfilename (). LastIndexOf ("."), upfile.g Etoriginalfilename (). Length ()); String uuid = Uuid.randomuuid (). toString (). Replace ("-", ""); String fileName = uuid+last; File Filet = new file (path,filename); if (!filet.exists ()) {filet.mkdirs (); } Map<String, Object>result = new HashMap<String, Object>(); try {Upfile.transferto (filet); } catch (IllegalStateException e) {logger.error ("Rich text editor picture upload failed, parameter exception:" +e); } catch (IOException E1) {logger.error ("Rich text editor picture upload failed IO exception:" +e1); } result.put ("state", "SUCCESS"); Result.put ("url", uploadpath.replace ("\ \", "/") +filename); Result.put ("original", "" "); Result.put ("type", last); Result.put ("Size", upfile.getsize ()); Result.put ("title", FileName); return result; }/** * Ueditor File Upload method * @param upfile * @param request * @param response * @return * * @RequestMapping (value= "/uploadfile", Method=requestmethod.post) @ResponseBody public Map<String, Object>UploadFile (@RequestParam (value= "Upfile", Required=false) multipartfile upfile,httpservletrequest request, HttpServletResponse response) {Date date = new Date (); String Uploadpath = "\\upload\\file\\" +new SimpleDateFormat ("yyyy\\mm\\"). Format (date); String path = Uploadpath; Attachment suffix String last = upfile.getoriginalfilename (). substring (Upfile.getoriginalfilename (). LastIndexOf ("."), upfile.g Etoriginalfilename (). Length ()); String uuid = Uuid.randomuuid (). toString (). Replace ("-", ""); String fileName = uuid+last; File Filet = new file (path,filename); if (!filet.exists ()) {filet.mkdirs (); } Map<String, Object>result = new HashMap<String, Object>(); try {Upfile.transferto (filet); } catch (IllegalStateException e) {logger.error ("Rich Text Editor file upload failed with parameter exception:" +e); } catch (IOException E1) {logger.error ("Rich Text Editor file upload failed IO exception:" +e1); } result.put ("state", "SUCCESS"); Result.put ("url", uploadpath.replace ("\ \", "/") +filename); Result.put ("original", "" "); Result.put ("type", last); Result.put ("Size", upfile.getsize ()); Result.put ("title", FileName); return result; }
This is the end of the simple uploading of images and files. What are the shortcomings, please point out!
Baidu Rich Text Editor ueditor/jsp version of the simple use, can upload pictures and accessories
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
