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
"imageUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 图片访问路径前缀 */
二 、页面修改
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script> <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script> tyle type="text/css"> div{ width:100%; } </style> </head> <body> <form id="form" method="post" action="./textarea.jhtml"> <input type="text" name="goodsname" value="goodsname" /> <script type="text/plain" id="myEditor" name="myEditor"> <p>欢迎使用UEditor!</p> </script> <input type="submit" value="提交"/> </form> <!-- editor的初始化 --> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor‘)就能拿到相关的实例 var editor_a = UE.getEditor(‘myEditor‘,{ initialFrameWidth : 400, initialFrameHeight: 300}); <!--用于上传文件跳转到controller--> UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == ‘uploadimage‘ || action == ‘uploadscrawl‘ || action == ‘uploadimage‘ || action == ‘uploadvideo‘ || action == ‘uploadfile‘) { return ‘./ueditor/uploadimage.jhtml‘; }else { return this._bkGetActionUrl.call(this, action); } } </script> </body>
三、后台操作
@Controller @RequestMapping(value="/ueditor") public class UeditorController { @RequestMapping(value="/jsp/config") public void config(HttpServletRequest request,HttpServletResponse response,String action) throws Exception { request.setCharacterEncoding("utf-8"); response.setHeader("Content-Type", "text/html"); String rootPath=request.getSession().getServletContext().getRealPath("/"); //会加载conf.json文件,注意路径问题 response.getWriter().write(new ActionEnter(request,rootPath).exec()); } @RequestMapping(value="/uploadimage") @ResponseBody public Map<String,Object> uploadimage(@RequestParam("upfile") MultipartFile[] multipartFiles, HttpServletRequest request,HttpServletResponse response) throws Exception { Map<String,Object> map=new HashMap<String,Object>(); String path=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/"); System.out.println("path++"+path); if(multipartFiles!=null && multipartFiles.length>0){ //循环遍历 for (MultipartFile multipartFile : multipartFiles) { //原来图片的名称 String OriginalFilename=multipartFile.getOriginalFilename(); //获得图片新名称 String newFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf("."))); //创建文件 File targetFile=new File(path,newFileName); if(!targetFile.exists()){ targetFile.mkdirs(); } String state="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 (Exception e) { state="FAIL"; } } } return map; }
原文地址:http://wlan2014.blog.51cto.com/5553663/1902367