当前位置:   article > 正文

Ueditor实现自定义conttoller请求或跨域请求_ueditor 跨域 返回

ueditor 跨域 返回


UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。我们在做网站文字编辑的时候会经常用到它。但是ueditor默认支持保存图片在网站的根目录下面。但是,对于网站来说,我们大多数的时候都要把静态资源保存到另外的服务器上,与应用服务器分开,以增加网站的性能

下面介绍一下这个方法:

一,

ueditor 1.4.2+ 推荐使用唯一的请求地址,通过GET参数action指定不同请求类型。 但很多用户都希望使用自己写好的上传地址,下面提供一种解决方法: 由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址,可以直接通过复写这个方法实现,把这段js单独写到一个js中,加入的网页,并且在放在引用uditor的js之后。例子如下:

  1. UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
  2. UE.Editor.prototype.getActionUrl = function(action) {
  3. if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
  4. return 'http://a.b.com/upload.php';
  5. } else if (action == 'uploadvideo') {
  6. return 'http://a.b.com/video.php';
  7. } else {
  8. return this._bkGetActionUrl.call(this, action);
  9. }
  10. }

action类型以及说明

  • uploadimage://执行上传图片或截图的action名称
  • uploadscrawl://执行上传涂鸦的action名称
  • uploadvideo://执行上传视频的action名称
  • uploadfile://controller里,执行上传视频的action名称
  • catchimage://执行抓取远程图片的action名称
  • listimage://执行列出图片的action名称
  • listfile://执行列出文件的action名称

把上面的返回地址换成自己的controller地址或跨域地址就可以了
二,定义返回值的格式
  由于ueditor是使用ajax的请求的,所以返回的格式是一个json串。格式如下:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg",
"type":".jpg",
"size" :"1024"
}
其中type是图片的类型; size是图片的大小,url就是图片插入到ueditor中的图片可访问的地址
我们还有另外一种方式知道返回的格式,就是在ueditor默认的配置情况下,看一下上传图片后成功的返回值格式就可以了。在浏览器上按下f12,点network->response
三,图片中文名返回乱码的解决方案
 当图片的名字是中文的时候,返回的结果中中文却是乱码,比如:???;就算是配置了所有的编码是utf8之后也不可以。这是因为在显示的时候ueditor是按unicode方式显示的。这个时候我们需要把返回结果的json串转成unicode格式,如下:
(1) 接收图片的controller:
  1. package com.gametech.controller;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.util.Iterator;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.ResponseBody;
  10. import org.springframework.web.multipart.MultipartFile;
  11. import org.springframework.web.multipart.MultipartHttpServletRequest;
  12. import org.springframework.web.multipart.commons.CommonsMultipartResolver;
  13. import com.alibaba.fastjson.JSON;
  14. import com.gametech.entity.ReturnUpLoadImage;
  15. import com.gametech.utils.StringUtils;
  16. @Controller
  17. @RequestMapping("upload")
  18. public class UploadController {
  19. /**
  20. *
  21. * @return
  22. */
  23. @RequestMapping("upImage")
  24. @ResponseBody
  25. public String upImage(HttpServletRequest request, HttpServletResponse response) {
  26. // 创建一个通用的多部分解析器
  27. CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
  28. request.getSession().getServletContext());
  29. String[] filenames = null;
  30. // 判断 request 是否有文件上传,即多部分请求
  31. //{"state": "SUCCESS","title": "1437299650668072896.jpg","original": "rdn_508f4a9624572.jpg","type": ".jpg","url": "/ueditor/upload/image/20150719/1437299650668072896.jpg","size": "14262"}
  32. ReturnUpLoadImage upLoadImage = new ReturnUpLoadImage();
  33. upLoadImage.setUrl("upload/1.jpg");
  34. if (multipartResolver.isMultipart(request)) {
  35. // 转换成多部分request
  36. //MultipartHttpServletRequest multiRequest = multipartResolver.resolveMultipart(request);
  1. <span style="white-space:pre"> </span>MultipartHttpServletRequest multiRequest =  (MultipartHttpServletRequest) request;
  2. filenames = new String[multiRequest.getFileMap().size()];
  3. // 取得request中的所有文件名
  4. Iterator<String> iter = multiRequest.getFileNames();
  5. int i = 0;
  6. while (iter.hasNext()) {
  7. // 记录上传过程起始时的时间,用来计算上传时间
  8. int pre = (int) System.currentTimeMillis();
  9. // 取得上传文件
  10. MultipartFile file = multiRequest.getFile(iter.next());
  11. if (file != null) {
  12. // 取得当前上传文件的文件名称
  13. String myFileName = file.getOriginalFilename();
  14. upLoadImage.setOriginal(myFileName);
  15. // 如果名称不为“”,说明该文件存在,否则说明该文件不存在
  16. if (myFileName.trim() != "") {
  17. System.out.println(myFileName);
  18. // 重命名上传后的文件名
  19. String fileName = "demoUpload" + file.getOriginalFilename();
  20. upLoadImage.setTitle(fileName);
  21. filenames[i] = fileName;
  22. i++;
  23. // 定义上传路径
  24. String path = "E:/" + fileName;
  25. File localFile = new File(path);
  26. try {
  27. file.transferTo(localFile);
  28. } catch (IllegalStateException e) {
  29. // TODO Auto-generated catch block
  30. e.printStackTrace();
  31. } catch (IOException e) {
  32. // TODO Auto-generated catch block
  33. e.printStackTrace();
  34. }
  35. }
  36. }
  37. // 记录上传该文件后的时间
  38. int finaltime = (int) System.currentTimeMillis();
  39. System.out.println(finaltime - pre);
  40. }
  41. }
  42. upLoadImage.setType(".jpg");
  43. upLoadImage.setSize("1024");
  44. String result = JSON.toJSONString(upLoadImage);
  45. result = StringUtils.chinaToUnicode(result);
  46. return result;
  47. //return "{\"state\": \"SUCCESS\",\"title\": \"1437300241099035569.jpg\",\"original\": \"QQ\u622a\u56fe20150327230133.jpg\",\"type\": \".jpg\",\"url\": \"/ueditor/upload/image/20150719/1437300241099035569.jpg\",\"size\": \"463908\"}";
  48. }
  49. }

(2) 中文转unicode方法
  1. /**
  2. * 把中文转成Unicode码
  3. * @param str
  4. * @return
  5. */
  6. public static String chinaToUnicode(String str){
  7. String result="";
  8. for (int i = 0; i < str.length(); i++){
  9. int chr1 = (char) str.charAt(i);
  10. if(chr1>=19968&&chr1<=171941){//汉字范围 \u4e00-\u9fa5 (中文)
  11. result+="\\u" + Integer.toHexString(chr1);
  12. }else{
  13. result+=str.charAt(i);
  14. }
  15. }
  16. return result;
  17. }

ok,这样就可以了。更多文章请访问: http://www.youxijishu.com

扫描关注游戏技术网:

如转载,请注明来自:游戏技术网



声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/507701
推荐阅读
相关标签
  

闽ICP备14008679号