Ueditor implements custom conttoler requests or cross-origin requests, ueditorconttoler

Source: Internet
Author: User
Tags website performance

Ueditor implements custom conttoler requests or cross-origin requests, ueditorconttoler

UEditor is a WYSIWYG text web Editor developed by Baidu's FEX front-end R & D team. It is lightweight, customizable, and focuses on user experience. It is open source based on the MIT protocol, allow free use and modification of code. We often use it for website text editing. However, ueditor supports saving images under the root directory of the website by default. However, for websites, most of the time we need to save static resources to another server and separate them from the application server to increase the website performance.

This method is described below:

I,

Ueditor 1.4.2 + we recommend that you use a unique request address and use the GET parameter action to specify different request types. However, many users want to use their own upload addresses. The following provides a solution: because all ueditor requests obtain the request address through the getActionUrl method of the editor object, this method can be directly implemented by writing this section of js to a separate js, add the webpage, and put it after the js that references uditor. Example:

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {        return 'http://a.b.com/upload.php';    } else if (action == 'uploadvideo') {        return 'http://a.b.com/video.php';    } else {        return this._bkGetActionUrl.call(this, action);    }}

Action type and description
  • Uploadimage: // The name of the action to be uploaded
  • Uploadscrawl: // name of the action to upload the graffiti
  • Uploadvideo: // action name of the video to be uploaded
  • Uploadfile: // The action name of the video to be uploaded in the controller.
  • Catchimage: // name of the action for capturing remote Images
  • Listimage: // execute the action name to list Images
  • Listfile: // execute the action name of the list file

Replace the returned address with your own controller address or cross-domain address. 2. Define the format of the returned value. Because ueditor uses ajax requests, the returned format is a json string. Format :{
"State": "SUCCESS ",
"Url": "upload/demo.jpg ",
"Title": "demo.jpg ",
"Original": "demo.jpg", "type": ". jpg", "size": "1024 "}
Here, type is the image type, size is the image size, and url is the accessible address of the image inserted into ueditor. We also have another way to know the returned format, in the default configuration of ueditor, you can check the format of the returned value after the image is uploaded successfully. Press f12 in the browser and click network-> response 3. The Chinese name of the image returns garbled characters. When the image name is Chinese, the returned results contain garbled characters, for example :???; Not even after UTF-8 encoding is configured. This is because ueditor is displayed in unicode mode during display. At this time, we need to convert the json string returned to the unicode format, as follows: (1) controller that receives the image:
Package com. gametech. controller; import java. io. file; import java. io. IOException; import java. util. iterator; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse; import org. springframework. stereotype. controller; import org. springframework. web. bind. annotation. requestMapping; import org. springframework. web. bind. annotation. responseBody; import org. springframework. web. mul Tipart. multipartFile; import org. springframework. web. multipart. multipartHttpServletRequest; import org. springframework. web. multipart. commons. commonsMultipartResolver; import com. alibaba. fastjson. JSON; import com. gametech. entity. returnUpLoadImage; import com. gametech. utils. stringUtils; @ Controller @ RequestMapping ("upload") public class UploadController {/***** @ return */@ RequestMapping ("upImage") @ Response Bodypublic String upImage (HttpServletRequest request, HttpServletResponse response) {// create a common multi-part parser CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver (request. getSession (). getServletContext (); String [] filenames = null; // determines whether the request has a file upload, that is, multiple requests // {"state": "SUCCESS", "title ": "1437299650668072896.jpg"," original ":" rdn_508f4a9624572.jpg "," type ":". jpg "," url ":"/ueditor/uplo Ad/image/20150719/1437299650668072896 .jpg", "size": "14262"} ReturnUpLoadImage upLoadImage = new ReturnUpLoadImage (); upLoadImage. setUrl ("upload/1.jpg"); if (multipartResolver. isMultipart (request) {// convert to multipart requestMultipartHttpServletRequest multiRequest = multipartResolver. resolveMultipart (request); filenames = new String [multiRequest. getFileMap (). size ()]; // get all file names in the request Iterator <String> iter = mu LtiRequest. getFileNames (); int I = 0; while (iter. hasNext () {// record the start time of the upload process, used to calculate the upload time int pre = (int) System. currentTimeMillis (); // get the uploaded file MultipartFile = multiRequest. getFile (iter. next (); if (file! = Null) {// get the name of the currently uploaded file String myFileName = file. getOriginalFilename (); upLoadImage. setOriginal (myFileName); // if the name is not "", the file exists; otherwise, the file does not exist if (myFileName. trim ()! = "") {System. out. println (myFileName); // rename the uploaded file name String fileName = "demoUpload" + file. getOriginalFilename (); upLoadImage. setTitle (fileName); filenames [I] = fileName; I ++; // defines the upload path String path = "E:/" + fileName; file localFile = new File (path); try {file. transferTo (localFile);} catch (IllegalStateException e) {// TODO Auto-generated catch blocke. printStackTrace ();} catch (IOException e) {// TODO Auto-generated catch blocke. printStackTrace () ;}}// record the time after the file is uploaded int finaltime = (int) System. currentTimeMillis (); System. out. println (finaltime-pre) ;}} upLoadImage. setType (". jpg "); upLoadImage. setSize ("1024"); String result = JSON. toJSONString (upLoadImage); result = StringUtils. chinaToUnicode (result); return result; // return "{\" state \ ": \" SUCCESS \ ", \" title \ ": \" 1437300241099035569.jpg \", \ "original \": \ "QQ \ u622a \ u56fe20150327230133.jpg \", \ "type \":\". jpg \ ", \" url \ ": \"/ueditor/upload/image/20150719/1437300241099035569 .jpg \ ", \" size \ ": \" 463908 \"}";}}

(2) unicode Conversion Method
/*** Convert Chinese to Unicode Code * @ param str * @ return */public static String chinaToUnicode (String str) {String result = ""; for (int I = 0; I <str. length (); I ++) {int chr1 = (char) str. charAt (I); if (chr1> = 19968 & chr1 <= 171941) {// Chinese character range \ u4e00-\ u9fa5 (Chinese) result + = "\ u" + Integer. toHexString (chr1);} else {result + = str. charAt (I) ;}} return result ;}

OK.

Scan and follow the game technology network:

If you reprinted it, please indicate that it is from: Game Technology Network



Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

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.