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

Ueditor图片上传自定义配置

不使用自带后台配置

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

UeditorConfig.properties

#ueditor编辑器相关配置
ueditor.imgePath=/upload
#图片上传的action
ueditor.imageActionName=uploadimage
ueditor.imageFieldName=upfile
ueditor.imageMaxSize=2048000
#上传文件的类型
ueditor.imageAllowFiles.str=.jpg,.png
ueditor.imageCompressEnable=true
ueditor.imageCompressBorder=1600
ueditor.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);
    }
};

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