1,将配置文件的获取方式修改成,由sprong mvc controller 中返回
2,在使用到ueditor 的地址加入上传请求的拦截,并将上传地址返回给ueditor 配置中心
3,自定义上传接口
由于ueditor 默认的获取配置文件的方式是通过,ueditor/jsp/controller.jsp中返回的。但在实际开发中往往都需要将上传的接口转移到程序的后台中控制。
(一)所以修改步骤一如下:
1)修改ueditor/ueditor.config.js配置中的代码,将获取接口指向自定义的接口
// 服务器统一请求接口路径 //, serverUrl: "/resources/ueditor/jsp/controller.jsp" , serverUrl: "/ueditor/controller.do"
2)将ueditor/jsp/config.json移动到ueditor 目录下,这个位置很重要,并与你的controller路径有关,第三点会说到
3),在自定义接口中进行代码处理,这一步需要将config.json文件内容返回。返回的步骤是1,获取到config.json文件的路径,2,读取文件内容然后返回就可以了。由于本程序采用ueditor提供的包里面的方法所以不需要做刚刚所说到的那两点,因为ueditor 包已经实现了。现在只需要配合路径使用就可以了。
我的controller 请求路径为:/ueditor/controller.do
@RequestMapping("controller.do") public String controller(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException { request.setCharacterEncoding( "utf-8" ); response.setHeader("Content-Type" , "text/html"); String rootPath = request.getServletContext().getRealPath( "/resources/" ); return new ActionEnter( request, rootPath ).exec(); }
上面代码 rootPath 获取到的路径为我程序,资源文件的物理路径如:d:/xx/xx/webapp/resources/
在跟入exec() 方法源码中会看到它会调用ConfigManager 类然后会看到如下代码
private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException { rootPath = rootPath.replace("\\", "/"); this.rootPath = rootPath; this.contextPath = contextPath; this.originalPath = this.rootPath + uri.replace(contextPath, ""); this.initEnv(); }
注意this.originalPath这个变量,这里路径应该为: d:/xx/xx/webapp/resources/ueditor/controller.do
/ueditor/controller.do这部分为我的config接口请求路径
private void initEnv() throws FileNotFoundException, IOException { File file = new File(this.originalPath); if (!file.isAbsolute()) { file = new File(file.getAbsolutePath()); } this.parentPath = file.getParent(); String configContent = this.readFile(this.getConfigPath()); try { JSONObject jsonConfig = new JSONObject(configContent); this.jsonConfig = jsonConfig; } catch (Exception var4) { this.jsonConfig = null; } }
然后看到上面 file.getParent(); 这里这里路径应该为:d:/xx/xx/webapp/resources/ueditor/
接着看:this.readFile(this.getConfigPath) 这里
private String getConfigPath() { return this.parentPath + File.separator + "config.json"; }
到这里就能等到完整的config.json路径了 d:/xx/xx/webapp/resources/ueditor/config.json
所以到这里/ueditor/controller.do 接口就可以将config.json内容返回了。
(二)所以修改步骤二如下:
1)看一下config.json重要的部分
uploadimage 这是ueditor内部的action 名称
upfile 这个是文件上传后的文件名称(获取文件流需要)
2)在引用到ueditor 的页面加上这句代码
<script type="text/javascript"> var ue = UE.getEditor('container'); UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') { return 'http://xxx.com/ueditor/uploadImage.do'; //在这里返回我们实际的上传图片地址 } else { return this._bkGetActionUrl.call(this, action); } } </script>
如果不是远程服务,则可以写相对路径
经过以上配置就可以把上传文件的请求提交到uploadImage.do 上面了
3)处理上传文件,其中AttachmentBean 是我自己程序中处理路径的bean 大家可以自己自定义
@RequestMapping("uploadImage.do") public ReturnUploadImage uploadImage(HttpServletRequest request, @RequestParam("upfile") MultipartFile file){ ReturnUploadImage returnUploadImage = new ReturnUploadImage(); UserEntity user = RequestUtil.getUser(request); try { String model = "ueditor"; AttachmentBean attachmentBean = new AttachmentBean(file,user,model); File newFile = new File(String.format(attachmentBean.getSavePath())); //如果文件夹不存在则创建 if(!newFile.getParentFile().exists()){ newFile.getParentFile().mkdirs(); } //保存文件 file.transferTo(newFile); //返回数据 returnUploadImage.setState("SUCCESS"); returnUploadImage.setUrl(attachmentBean.getUrl(ConfigUtil.getStorageDomain(FileStorageType.STATIC))); returnUploadImage.setTitle(attachmentBean.getFileName()); returnUploadImage.setOriginal(file.getOriginalFilename()); } catch (IOException e) { e.printStackTrace(); returnUploadImage.setState("ERROR"); } return returnUploadImage; }
做得一提的是,返回时需要按ueditor 的格式返回
public class ReturnUploadImage { private String state;//上传状态SUCCESS 一定要大写 private String url;//上传地址 private String title;//图片名称demo.jpg private String original;//图片名称demo.jpg public String getState() { return state; } public void setState(String state) { this.state = state; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getOriginal() { return original; } public void setOriginal(String original) { this.original = original; } }
到此就全部结束了。