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

前言：

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

   ueditor+springboot    ：

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

开始：

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

https://blog.csdn.net/qq_38431927/article/details/98985681

接下来就是改配置了

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

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

/**前端ueditor百度富文本编辑器controller**/
@Controller
public class ServerController {
    private static Logger log = LoggerFactory.getLogger(ServerController.class);

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Content-Type", "text/html");
       
        // jar包里的json文件只能通过流读取
        ClassPathResource classPathResource = new ClassPathResource("config.json");
        StringBuilder builer= new StringBuilder();
        InputStream inputStream = classPathResource.getInputStream();
        try {
            InputStreamReader reader = new         InputStreamReader(classPathResource.getInputStream(),"UTF-8");
            BufferedReader bfReader = new BufferedReader(reader);

            String temContent = null;
            while ((temContent = bfReader.readLine()) != null){
                builer.append(temContent);
            }
            log.info("读取的config.json文件===="+builer.toString());

            String exec =  builer.toString().trim();
            log.info("读取的exec===="+builer.toString());
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();

            bfReader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

用ClassPathResource classPathResource = new ClassPathResource("config.json");是可以访问jar包中的.json文件的

这里要注意一下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是图片回显路径的访问域名
然后这里配置成你的图片回显访问域名！！

结束！！！

希望对你有所帮助！