在springmvc中使用Ueditor

2024-11-23 技术教程

Ueditor下载地址：

http://ueditor.baidu.com/website/download.html

下载后直接解压缩。我主要实现文件上传和form表单提交数据。

一、配置文件修改

uedit.config.js

var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目录

serverUrl: URL + "jsp/config.jhtml" // 服务器统一请求接口路径

conf.json

"p_w_picpathUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 图片访问路径前缀 */

二、页面修改

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scripttype="text/javascript"charset="utf-8"src="./ueditor/ueditor.config.js"></script><scripttype="text/javascript"charset="utf-8"src="./ueditor/ueditor.all.min.js"></script><scripttype="text/javascript"charset="utf-8"src="./ueditor/lang/zh-cn/zh-cn.js"></script>tyletype="text/css">div{width:100%;}</style></head><body><formid="form"method="post"action="./textarea.jhtml"><inputtype="text"name="goodsname"value="goodsname"/><scripttype="text/plain"id="myEditor"name="myEditor"><p>欢迎使用UEditor！</p></script><inputtype="submit"value="提交"/></form><scripttype="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例vareditor_a=UE.getEditor('myEditor',{initialFrameWidth:400,initialFrameHeight:300});UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl=function(action){if(action=='uploadp_w_picpath'||action=='uploadscrawl'||action=='uploadp_w_picpath'||action=='uploadvideo'||action=='uploadfile'){return'./ueditor/uploadp_w_picpath.jhtml';}else{returnthis._bkGetActionUrl.call(this,action);}}</script></body>

三、后台操作

@Controller@RequestMapping(value="/ueditor")publicclassUeditorController{@RequestMapping(value="/jsp/config")publicvoidconfig(HttpServletRequestrequest,HttpServletResponseresponse,Stringaction)throwsException{request.setCharacterEncoding("utf-8");response.setHeader("Content-Type","text/html");StringrootPath=request.getSession().getServletContext().getRealPath("/");//会加载conf.json文件，注意路径问题response.getWriter().write(newActionEnter(request,rootPath).exec());}@RequestMapping(value="/uploadp_w_picpath")@ResponseBodypublicMap<String,Object>uploadp_w_picpath(@RequestParam("upfile")MultipartFile[]multipartFiles,HttpServletRequestrequest,HttpServletResponseresponse)throwsException{Map<String,Object>map=newHashMap<String,Object>();Stringpath=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/");System.out.println("path++"+path);if(multipartFiles!=null&&multipartFiles.length>0){//循环遍历for(MultipartFilemultipartFile:multipartFiles){//原来图片的名称StringOriginalFilename=multipartFile.getOriginalFilename();//获得图片新名称StringnewFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf(".")));//创建文件FiletargetFile=newFile(path,newFileName);if(!targetFile.exists()){targetFile.mkdirs();}Stringstate="SUCCESS";try{multipartFile.transferTo(targetFile);map.put("original",OriginalFilename);map.put("name",newFileName);//注意url会和conf.json中的路径配合找到图片map.put("url",newFileName);map.put("state","SUCCESS");}catch(Exceptione){state="FAIL";}}}returnmap;}