Ueditor编辑器图片上传自定义配置

Ueditor图片上传自定义配置

不使用自带后台配置

1、加载Ueditor编辑器所在的页面时，默认访问配置项serverUrl，访问这个请求后主要是为了返回配置信息。请求链接：serverUrl+”?action=config”

UeditorConfig.properties

#ueditor编辑器相关配置ueditor.imgePath=/upload#图片上传的actionueditor.imageActionName=uploadimageueditor.imageFieldName=upfileueditor.imageMaxSize=2048000#上传文件的类型ueditor.imageAllowFiles.str=.jpg,.pngueditor.imageCompressEnable=trueueditor.imageCompressBorder=1600ueditor.imageInsertAlign=none#图片显示的前缀ueditor.imageUrlPrefix=

类文件UeditorConfig.java

@Configuration@PropertySource(value = "classpath:config/ueditor.properties")public class UeditorConfig implements Serializable{    @Value("${ueditor.imgePath}")    private String imgePath;    @Value("${ueditor.imageActionName}")    private String imageActionName;    @Value("${ueditor.imageFieldName}")    private String imageFieldName;    @Value("${ueditor.imageMaxSize}")    private int imageMaxSize;    @Value("${ueditor.imageAllowFiles.str}")    private String imageAllowFilesStr;    private List<String> imageAllowFiles;    @Value("${ueditor.imageCompressEnable}")    private Boolean imageCompressEnable;    @Value("${ueditor.imageCompressBorder}")    private int imageCompressBorder;    @Value("${ueditor.imageInsertAlign}")    private String imageInsertAlign;    @Value("${ueditor.imageUrlPrefix}")    private String imageUrlPrefix;    ...set和get方法

控制器UeditorController.java
因为.properties文件无法直接定义数组，所以需要转换

    @RequestMapping(value = "/config")    @ResponseBody    public UeditorConfig config(){        ueditorConfig.setImageAllowFiles(Arrays.asList(ueditorConfig.getImageAllowFilesStr().split(",")));        return ueditorConfig;    }

只要后台正确返回如下的数据格式

{    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",    "imagePath": "/ueditor/php/",    "imageFieldName": "upfile",    "imageMaxSize": 2048,    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]    "其他配置项...": "其他配置值..."}

2、加载成功，页面的图片上传按钮可以使用，选择完图片会请求serverUrl+”?action=uploadimage”，在方法中辨别action进而上传图片。
回传的数据格式要求：

rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容rs.put("url",fileUrls);         //能访问到你现在图片的路径rs.put("title", "");rs.put("original", "");

改进方法：由于该配置项用于前端的编辑器，应该放在前端处理，做出如下改进：
在初始化代码var ue = UE.getEditor(‘editor’)下添加

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function (action) {    if(action == 'config'){    //能找到config.json文件的路径    return "config.json";    }else if (action == 'uploadimage') {        //上传图片的路径        return "/uploads";    } else {        return this._bkGetActionUrl.call(this, action);    }};

这样大部分问题都能够解决。