百度编辑器ueditor1.4.2-更改图片上传路径和图片读取路径

/** * ueditor相关的Controller *  * @author zsj */@Controllerpublic class UeditorController {protected final Logger logger = LoggerFactory.getLogger(getClass()); @RequestMapping(value = { "/ueditor/config" }, method = {RequestMethod.POST, RequestMethod.GET })@ResponseBodypublic Object ueditorConfig(@RequestParam(value = "action", required = false) String action,HttpServletRequest request, HttpServletRequest response)throws Exception {logger.info("百度编辑器action=[{}]", action);if ("config".equals(action)) {UeditorConfigBean ucb = new UeditorConfigBean();return ucb;} else if ("/ueditor/uploadImg".equals(action)) {// 图片上传return uploadImg(((MultipartHttpServletRequest) request).getFile("upfile"));}return action;} /** * 图片上传 *  * @return * @throws Exception */public Object uploadImg(MultipartFile upfile) throws Exception {String orgName = upfile.getOriginalFilename(), houzui = orgName.substring(orgName.lastIndexOf("."), orgName.length()), fileName = DateUtil.format(new Date(), "yyyyMMddHHmmss"), contentType = upfile.getContentType(), imgName = fileName + houzui;String imgPath = CommonDef.FS_ROOT + "annex/baidueditor/" + imgName;logger.info("百度编辑器上传图片orgName=[{}],contentType=[{}],imgPath=[{}]",orgName, contentType, imgPath);FileUtils.writeByteArrayToFile(new File(imgPath), upfile.getBytes());String imgUrl = "ueditor/readImg/" + fileName + "/"+ houzui.replace(".", "");logger.info("imgUrl=[{}]", imgUrl);return "{'url':'" + imgUrl + "','state':'SUCCESS'}";}/** * 读取图片 *  * @return * @throws Exception */@RequestMapping(value = { "/ueditor/readImg/{imgName}/{houzui}" }, method = {RequestMethod.POST, RequestMethod.GET })public void readImg(@PathVariable("imgName") String imgName,@PathVariable("houzui") String houzui, HttpServletResponse response)throws Exception {logger.debug("读取百度编辑器的图片imgName=[{}]", imgName);response.setContentType("image/*");String ctxPath = CommonDef.FS_ROOT + "annex/baidueditor/" + imgName+ "." + houzui;File image = new File(ctxPath);if (!image.exists()) {response.getWriter().append("");return;}response.getOutputStream().write(FileUtils.readFileToByteArray(image));response.getOutputStream().flush();response.getOutputStream().close();} }/*** * <pre> * 1. 上传图片配置项 *  *     imageActionName {String} [默认值："uploadimage"] //执行上传图片的action名称, *     imageFieldName {String} [默认值："upfile"] //提交的图片表单名称 *     imageMaxSize {Number} [默认值：2048000] //上传大小限制，单位B *     imageAllowFiles {String} , //上传图片格式显示 *  *     //默认值： *     [".png", ".jpg", ".jpeg", ".gif", ".bmp"] *  *     imageCompressEnable {Boolean} [默认值：true] //是否压缩图片,默认是true *     imageCompressBorder {Number} [默认值：1600] //图片压缩最长边限制 *     imageInsertAlign {String} [默认值："none"] //插入的图片浮动方式 *     imageUrlPrefix {String} [默认值：""] //图片访问路径前缀 *     imagePathFormat {String} [默认值："/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"] //上传保存路径,可以自定义保存路径和文件名格式，上传路径配置 * </pre> *  * <pre> * 附件上传：filePathFormat、fileUrlPrefix * 视频上传：videoPathFormat、videoUrlPrefix * </pre> */class UeditorConfigBean {/** * <pre> * 通过在 php/config.json 文件，配置 imageUrlPrefix 可以给返回的路径添加指定的前缀。 *  * 编辑器和图片地址同域的情况下，可以直接使用后台返回的路径，不需要额外配置前缀 假如编辑器和图片不在一个域名下，需要给返回路径添加域名前缀，可以设置 * imageUrlPrefix 配置项为 "http://img.domain"，这时插入编辑器的图片会是这样： *  * "http://img.domain/ueditor/php/upload/2014/06/06/123.jpg"  * [默认值：""]图片访问路径前缀 * </pre> */private String imageUrlPrefix = CommonDef.WEBSITE_URL;/** * <pre> * [默认值："uploadimage"] //执行上传图片的action名称, * </pre> */private String imageActionName = "/ueditor/uploadImg";private String fileUrlPrefix = CommonDef.WEBSITE_URL;private String videoUrlPrefix = CommonDef.WEBSITE_URL;@Deprecatedprivate String imagePathFormat = "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}";@Deprecatedprivate String filePathFormat = "/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}";@Deprecatedprivate String videoPathFormat = "/ueditor/video/{yyyy}{mm}{dd}/{time}{rand:6}";/** * imageFieldName {String} [默认值："upfile"] //提交的图片表单名称 */private String imageFieldName = "upfile";private String[] imageAllowFiles = { ".png", ".jpg", ".jpeg", ".gif",".bmp" };private String[] fileAllowFiles = { ".doc", ".docx", ".txt", ".pdf",".xlsx", ".xls", ".png", ".jpg", ".jpeg", ".gif", ".bmp" };public String getImageUrlPrefix() {return imageUrlPrefix;}public void setImageUrlPrefix(String imageUrlPrefix) {this.imageUrlPrefix = imageUrlPrefix;}public String getImageActionName() {return imageActionName;}public void setImageActionName(String imageActionName) {this.imageActionName = imageActionName;}public String getImagePathFormat() {return imagePathFormat;}public void setImagePathFormat(String imagePathFormat) {this.imagePathFormat = imagePathFormat;}public String getFilePathFormat() {return filePathFormat;}public void setFilePathFormat(String filePathFormat) {this.filePathFormat = filePathFormat;}public String getFileUrlPrefix() {return fileUrlPrefix;}public void setFileUrlPrefix(String fileUrlPrefix) {this.fileUrlPrefix = fileUrlPrefix;}public String getVideoPathFormat() {return videoPathFormat;}public void setVideoPathFormat(String videoPathFormat) {this.videoPathFormat = videoPathFormat;}public String getVideoUrlPrefix() {return videoUrlPrefix;}public void setVideoUrlPrefix(String videoUrlPrefix) {this.videoUrlPrefix = videoUrlPrefix;}public String[] getImageAllowFiles() {return imageAllowFiles;}public void setImageAllowFiles(String[] imageAllowFiles) {this.imageAllowFiles = imageAllowFiles;}public String[] getFileAllowFiles() {return fileAllowFiles;}public void setFileAllowFiles(String[] fileAllowFiles) {this.fileAllowFiles = fileAllowFiles;}public String getImageFieldName() {return imageFieldName;}public void setImageFieldName(String imageFieldName) {this.imageFieldName = imageFieldName;}}

如何自定义请求地址

本文档说明修改请求地址的方法。

应用场景

ueditor 1.4.2+ 推荐使用唯一的请求地址，通过GET参数action指定不同请求类型。但很多用户都希望使用自己写好的上传地址，下面提供一种解决方法：由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现，例子如下：

js覆盖原有getActionUrl 方法的实现

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {        return 'http://a.b.com/upload.php';    } else if (action == 'uploadvideo') {        return 'http://a.b.com/video.php';    } else {        return this._bkGetActionUrl.call(this, action);    }}

action类型以及说明

• uploadimage：//执行上传图片或截图的action名称
• uploadscrawl：//执行上传涂鸦的action名称
• uploadvideo：//执行上传视频的action名称
• uploadfile：//controller里,执行上传视频的action名称
• catchimage：//执行抓取远程图片的action名称
• listimage：//执行列出图片的action名称
• listfile：//执行列出文件的action名称

跨域

修改请求链接往往会遇上跨域问题，跨域支持说明请移步：跨域文档