edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能

最近项目需要新增一个发布文章的模块，用的是百度的Ueditor富文本编辑器。

公司用的是阿里云的图片服务器，需要直接把文章中图片上传到服务器上，但是这个编辑器的上传图片是直接上传到Tomcat的根目录。

不能满足要求，尝试改造了一下上传图片的功能。

下载下来的编辑器直接导入项目webapp目录下

因为用的是Spring框架，基本已经包含了ueditor需要的几个jar包，所以不需要导入了。

需要注意的是，这个ueditor-1.1.1.jar的这个jar包，其实不需要导入，因为这个包里面就只有一个文件Uploader.java

而在ueditor的jsp目录下已经有了Uploader.java文件，所以直接把这个文件copy到工作区中，访问这个文件就可以了。

在调用的地方改一下目录

把

改成

如下图：

然后关键就是要改造一下Uploader.java这个类。

原有上传代码如下：

1 public void upload() throwsException {2 boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);3 if (!isMultipart) {4 this.state = this.errorInfo.get("NOFILE");5 return;6 }7 DiskFileItemFactory dff = newDiskFileItemFactory();8 String savePath = this.getFolder(this.savePath);9 dff.setRepository(newFile(savePath));10 try{11 ServletFileUpload sfu = newServletFileUpload(dff);12 sfu.setSizeMax(this.maxSize * 1024);13 sfu.setHeaderEncoding("utf-8");14 FileItemIterator fii = sfu.getItemIterator(this.request);15 while(fii.hasNext()) {16 FileItemStream fis =fii.next();17 if (!fis.isFormField()) {18 this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);19 if (!this.checkFileType(this.originalName)) {20 this.state = this.errorInfo.get("TYPE");21 continue;22 }23 this.fileName = this.getName(this.originalName);24 this.type = this.getFileExt(this.fileName);25 //获取了存放文件的相对路径

26 this.url = savePath + "/" + this.fileName;27 BufferedInputStream in = newBufferedInputStream(fis.openStream());28 File file = new File(this.getPhysicalPath(this.url));29 FileOutputStream out = newFileOutputStream( file );30 BufferedOutputStream output = newBufferedOutputStream(out);31 //这里直接在服务器根目录生成了图片文件

32 Streams.copy(in, output, true);33 this.state=this.errorInfo.get("SUCCESS");34 this.size =file.length();35 //UE中只会处理单张上传，完成后即退出

36 break;37 } else{38 String fname =fis.getFieldName();39 //只处理title，其余表单请自行处理

40 if(!fname.equals("pictitle")){41 continue;42 }43 BufferedInputStream in = newBufferedInputStream(fis.openStream());44 BufferedReader reader = new BufferedReader(newInputStreamReader(in));45 StringBuffer result = newStringBuffer();46 while(reader.ready()) {47 result.append((char)reader.read());48 }49 this.title = new String(result.toString().getBytes(),"utf-8");50 reader.close();51

52 }53 }54 } catch(SizeLimitExceededException e) {55 this.state = this.errorInfo.get("SIZE");56 } catch(InvalidContentTypeException e) {57 this.state = this.errorInfo.get("ENTYPE");58 } catch(FileUploadException e) {59 this.state = this.errorInfo.get("REQUEST");60 } catch(Exception e) {61 this.state = this.errorInfo.get("UNKNOWN");62 }63 }

改造后如下：

1 //改造后的代码，百度原有代码注释了

2 public void upload() throwsException3 {4 boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);5 if (!isMultipart)6 {7 this.state = this.errorInfo.get("NOFILE");8 return;9 }10 try

11 {12 MultipartResolver resolver = newCommonsMultipartResolver(13 this.request.getSession().getServletContext());14 MultipartHttpServletRequest multipartRequest =resolver.resolveMultipart(request);15 CommonsMultipartFile orginalFile = (CommonsMultipartFile) multipartRequest.getFile("upfile");16

17 this.originalName =orginalFile.getOriginalFilename();18 if (!this.checkFileType(this.originalName))19 {20 this.state = this.errorInfo.get("TYPE");21 return;22 }23 this.type = this.getFileExt(this.originalName);24 this.size =orginalFile.getSize();25

26 //这里是公司内部上传到阿里云服务器的工具类

27 String key = ImgUtils.uploadImage("xxxx",28 ImageKind.Picture,29 orginalFile.getInputStream(),30 this.size);31

32 this.fileName =key;33 this.url = "http://xxx.aliyuncs.com/" +key;34 this.state = this.errorInfo.get("SUCCESS");35 }36 catch(Exception e)37 {38 this.state = this.errorInfo.get("UNKNOWN");39 }40 }

用到了Spring的这两个文件

import org.springframework.web.multipart.commons.CommonsMultipartFile;

import org.springframework.web.multipart.commons.CommonsMultipartResolver;

然后编辑器页面上显示的时候，img的src目录需要改一下

1 callback: function(editor, $w, url, state) {2

3 if (state == "SUCCESS") {4 //显示图片计数+1

5 Upload.showCount++;6 var $img = $(""),7 var $img = $(""),8 $item = $("

10 if ($(".edui-image-upload2", $w).length < 1) {11 $(".edui-image-content", $w).append($item);12

13 Upload.render(".edui-image-content", 2)14 .config(".edui-image-upload2");15 } else{16 $(".edui-image-upload2", $w).before($item).show();17 }18

19 $img.on("load", function() {20 Base.scale(this, 120);21 Base.close($(this));22 $(".edui-image-content", $w).focus();23 });24

25 } else{26 currentDialog.showTip( state );27 window.setTimeout( function() {28

29 currentDialog.hideTip();30

31 }, 3000);32 }33

34 Upload.toggleMask();35

36 }

大功告成。