利用ueditor的文件上传功能上传文件到外部服务器的地址&&&&&字符统计功能重写
markdown重写的文章地址: http://blog.csdn.net/wang_jingj/article/details/54343476
这几天用到了UEDITOR的文件上传功能,但是UEDITOR自带的文件上传功能只能将文件上传到项目根目录.百度搜索也没有很多相关的资料,更关键的是没有相关的源代码.
所以今天把我自己实现的这部分代码上传,希望大家共同进步!
如何使用UEDITOR以及UEDITOR的基本配置在这里不多说了,网上多的很.
本代码基于maven,spring3,spring MVC实现.
下面展示实现的过程.
第一步:
在JSP页面重写UEDITOR的getActionUrl方法
//编辑器资源文件根路径 最好在ueditor.config.js中配置
window.UEDITOR_HOME_URL = "/ueditor/";
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor',{initialFrameHeight: 500,initialFrameWidth:800,maximumWords:3000,elementPathEnabled:false});
//复写UEDITOR的getActionUrl 方法,定义自己的Action
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadfile') {
var id = $('#carInfoId').val();
return '<%=contextPath %>/ueditor/fileupload/upload.do';
} else {
return this._bkGetActionUrl.call(this, action);
}
};
UEDITOR官方介绍所有的Action都会经过这个方法.现在我们需要重定向的是文件上传和图片上传,其他的功能继续执行以前的功能代码.
第二步:
重写文件上传功能的Controller.
@Controller
@RequestMapping("/ueditor/fileupload")
public class FileUpLoadController {
// 文件上传路径
@Resource(name="fileuploadPath")
private String fileuploadPath;
// 文件读取路径
@Resource(name="httpPath")
private String httpPath;
/**
* 文件上传Action
* @param req
* @return UEDITOR 需要的json格式数据
*/
@RequestMapping(value="upload",method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map
Map
MultipartHttpServletRequest mReq = null;
MultipartFile file = null;
InputStream is = null ;
String fileName = "";
// 原始文件名 UEDITOR创建页面元素时的alt和title属性
String originalFileName = "";
String filePath = "";
try {
mReq = (MultipartHttpServletRequest)req;
// 从config.json中取得上传文件的ID
file = mReq.getFile("upfile");
// 取得文件的原始文件名称
fileName = file.getOriginalFilename();
originalFileName = fileName;
if(!StringUtils.isEmpty(fileName)){
is = file.getInputStream();
fileName = FileUtils.reName(fileName);
filePath = FileUtils.saveFile(fileName, is, fileuploadPath);
} else {
throw new IOException("文件名为空!");
}
result.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
result.put("url",httpPath + filePath);
result.put("title", originalFileName);
result.put("original", originalFileName);
}
catch (Exception e) {
System.out.println(e.getMessage());
result.put("state", "文件上传失败!");
result.put("url","");
result.put("title", "");
result.put("original", "");
System.out.println("文件 "+fileName+" 上传失败!");
}
return result;
}
}
这里用到的工具类,源码里边有,由于篇幅原因,就不贴出来了.
文件上传的这个Controller需要注意的地方是返回的JSON数据格式.UEDITOR执行完此Controller之后,会在富文本编辑器内部生成html标签.而生成的内容就是根据此处的JSON数据来填充的.state的value值一定要是大写的"SUCCESS".
第三步:
配置文件上传目录和文件读取的地址.
#file upload path
fileuploadPath=F:/worksoft/nginxfilepath
#file read path
httpPath=http://localhost:80/
额...注释 随便看看就好了哈.
此处文件上传和读取的 服务器用的是nginx,具体请看下文.(默认端口号是80).
解释下为什么要用两个地址:1.文件上传路径是nginx存放文件的地址.2.文件读取地址是nginx对外开放的可以读取服务器内部文件的地址.试想我不可能用/temp/**/**放置到网页上进行显示,而且也显示不出来的.
第四步:
建立自己的NGINX服务器进行测试.
windows下的NGINX服务器的搭建和使用都是很简单的.此处需要注意的一点是:nginx默认的目录是它自己目录下边的html.我们如果想放到其他地方,则需要修改nginx/conf/nginx.conf文件.
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root F:\worksoft\nginxfilepath;
index index.html index.htm;
}
然后启动nginx.就可以进行UEDITOR的测试了.
关于UEDITOR的字符统计功能,我不得不吐槽一下......一张图片或者一个文件都是按照一个字符进行统计的......这样可能会跟数据库字段的长度产生冲突导致项目上线后发生异常.不过这一点也可以通过重写UEDITOR的getContentLength方法来实现.
// 复写UEDITOR的getContentLength方法 解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
UE.Editor.prototype.getContentLength = function(){
return this.getContent().length;
}
此处只是保留了UEDITOR自身的getContentLength方法,并没有其他地方再使用它.
附:源码下载地址:http://download.csdn.net/detail/qq457557442/8322227