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

/**
* ueditor相关的Controller
*
* @author zsj
*/

@Controller
public class UeditorController {

protected final Logger logger = LoggerFactory.getLogger(getClass());

@RequestMapping(value = { "/ueditor/config" }, method = {
RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public 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;
@Deprecated
private String imagePathFormat = "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}";
@Deprecated
private String filePathFormat = "/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}";
@Deprecated
private 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名称

跨域

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