spring boot 集成ueditor

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;
    }
}

到此就全部结束了。

spring boot 集成ueditor

猜你喜欢