文档章节

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

shodaiho
 shodaiho
发布于 2016/04/22 10:10
字数 891
阅读 417
收藏 0

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

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

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

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

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

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

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

在调用的地方改一下目录

<%@ page import="com.baidu.ueditor.um.Uploader" %>

改成

<%@ page import="com.myproject.upload.Uploader"%>

如下图:

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

原有上传代码如下:

 1 public void upload() throws Exception {
 2         boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
 3         if (!isMultipart) {
 4             this.state = this.errorInfo.get("NOFILE");
 5             return;
 6         }
 7         DiskFileItemFactory dff = new DiskFileItemFactory();
 8         String savePath = this.getFolder(this.savePath);
 9         dff.setRepository(new File(savePath));
10         try {
11             ServletFileUpload sfu = new ServletFileUpload(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 = new BufferedInputStream(fis.openStream());
28                     File file = new File(this.getPhysicalPath(this.url));
29                     FileOutputStream out = new FileOutputStream( file );
30                     BufferedOutputStream output = new BufferedOutputStream(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 = new BufferedInputStream(fis.openStream());
44                     BufferedReader reader = new BufferedReader(new InputStreamReader(in));
45                     StringBuffer result = new StringBuffer();  
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() throws Exception
 3     {
 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 = new CommonsMultipartResolver(
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 = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),  7                 var $img = $("<img src='" + url + "' class='edui-image-pic' />"),  8                     $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);
 9 
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         }

 大功告成。

 

© 著作权归作者所有

shodaiho
粉丝 2
博文 10
码字总数 9082
作品 0
南京
私信 提问
UMeditor强大的富文本编辑器,UEditor的Mini版本

UMeditor UMeditor富文本编辑器 UMeditor,简称UM,是 ueditor 的简版。是为满足广大门户网站对于简单发帖框和回复框的需求,专门定制的在线富文本编辑器。我们的目标不仅是要提高在线编辑的...

蒋轩
09/09
37
0
CCMars/UMeditor-Plus

UMeditor-Plus富文本编辑器 UMeditor-Plus,是基于 UMeditor 二次开发,移除服务端相关,可以支持所有云存储上传。 主要特点 轻量: 主文件的代码量为139k。 加载速度更快: 放弃了使用传统的i...

CCMars
02/13
0
0
UMeditor 1.2.2 发布,在线富文本编辑器

# UMeditor Change List ## 1.2.2 ### 功能更新 1. **添加插入数学公式** 2. 支持插入动态地图 3. 支持复制图片、截屏图片的粘贴 4. 添加自动保存插件,支持草稿箱功能 5. 支持拖放图片上传并...

战毅
2014/03/19
4.4K
5
ueditor 简版编辑器 um 发布(UEditorMINI)

umeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变。全版本的代码量为125k,而且放弃了使用传统的i...

战毅
2013/09/17
13.6K
27
ThinkSAAS开源社区2.0版本发布下载

下载地址: http://file.thinksaas.cn/down/thinksaas2.0.zip ThinkSAAS2.0更新内容: Version 2.0 新增功能 . 增加后台用户留言管理 . 增加后台消息管理 . 增加淘贴管理,完善帖子专辑功能 ...

ThinkSAAS
2013/10/09
4.3K
13

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部