springboot集成ueditor配置自定义上传文件方法到服务器并回显

前言：

ueditor百度富文本编辑器，bug是真的多，走一步一个bug啊，折腾了好几天了，下面个把我整好的分享给大家！

 ueditor+springboot    ：

        上传到项目jar包项目外的服务器文件夹（用的是自己后台的上传方法），并实现图片回显

开始：

1.先按照这个把ueditor整合到项目中：

https://blog.youkuaiyun.com/qq_38431927/article/details/98985681

接下来就是改配置了

2.首先我们springboot我是打成jar包的形式部署的，所以用上述链接中加载config.json方式不好使

    改成：（注意这里把config.json直接放到resources下）

@Controller
public class UeditorConfig {
    @Value(value="classpath:config.json")
    private Resource resource;

    @RequestMapping(value = "/config")
    public void getUEConfig(HttpServletRequest request, HttpServletResponse response){
        Resource res = new ClassPathResource("config.json");
        response.setHeader("Content-Type" , "text/html");


        try {
            BufferedReader br = new BufferedReader(new InputStreamReader(resource.getInputStream()));
            StringBuffer message=new StringBuffer();
            String line = null;
            while((line = br.readLine()) != null) {
                message.append(line);
            }
            String result = message.toString().replaceAll("/\\*(.|[\\r\\n])*?\\*/","");
            JSONObject json = JSONObject.fromObject(result);
            PrintWriter out = response.getWriter();
            out.print(json.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }


    }
}

这里要注意一下ueditor.config.js中改一下

 

var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;
 
 
 
serverUrl: server_url+"/config"

3.下面改自定义上传：

 在你放编辑器的页面的js中放入以下代码：

      '/demo/uploads'; //对应后台上传文件的方法

//建议使用工厂方法getEditor创建和引用编辑器实例，
    //如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            return '/demo/uploads'; //对应后台上传文件的方法
        } else if (action == 'uploadvideo') {
            return '';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

4.在你后台上传的方法中注意：

  

 

返回格式一定要用json形式，必须要用state  和   url 字段

原因：在image.js中要用到

 

看到这里你应该明白了imageUrlPrefix是图片回显路径的访问域名

这里配置成你的图片回显访问域名！！

结束！！！

希望对你有所帮助！