微服务迁移记（五）：WEB层搭建(5)-集成ueditor编辑器，伪分布式图片上传

一、redis搭建

二、WEB层主要依赖包

三、FeignClient通用接口

以上三项，参考《微服务迁移记（五）：WEB层搭建(1)》

四、SpringSecurity集成

参考：《微服务迁移记（五）：WEB层搭建(2)-SpringSecurity集成》

五、FreeMarker集成

参考：《微服务迁移记（五）：WEB层搭建(3)-FreeMarker集成》

六、简单权限管理

参考：《微服务迁移记（五）：WEB层搭建(4)-简单的权限管理》

七、集成多功能编辑器：ueditor，实现应用将图片等附件保存到应用外

对于一款MIS系统、CMS系统等，一多功能编辑器是必不可少的组件。目前用的比较多的有百度的ueditor、ckeditor等。本文将详细介绍集成ueditor的过程。

1. 下载ueditor

官网地址：http://ueditor.baidu.com/website/，下载utf8 jsp版本。

解压后删除jsp目录，然后拷到/resources/static/ueditor_1_4_3_3

2. 必要的包导入

注意：com.gitee.qdbp.thirdparty这个是一哥们扔到码云上的，可以直接拿来用。你也可以把源代码导出来放到自己项目中进行重构。

 <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

3. 前台html集成

<script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.all.min.js"></script>
<!--可选-->
<script type="text/javascript" src="/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>

$(function () {
        //ueditor初始化
        var um = UE.getEditor('article_content',{
            textarea:"article_content"
        });
        um.ready(function(){
            um.setContent('${article.article_content}');
        });
});

通过上面3个步骤，打开页面后，可以看到编辑器已经可以用了。但是图片、附件上传功能不可用，需要再做额外配置。

4. 文件上传配置

先看下官方示例,ueditor.config.js指定配置URL地址为jsp/controller.jsp，再由jsp/controller.jsp指定config.json的路径，在config.json里配置上传路径等信息。

明白这个原理后，我们就可以把URL地址改成任意我们定义的一个controller。

新建UeditorController，映射访问地址为：/ueconfig，然后我们把ueditor.config.js里的URL改为这个地址

// 服务器统一请求接口路径
 serverUrl:  "/ueconfig"

控制器中，我们模仿官方示例编写如下代码：

@RequestMapping("/ueconfig")
    public void config(String action,HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

基本上到这里，我们把config.js拷到resources根目录下，就可以实现附件上传了。

我们再考虑一个问题：最终项目我是要打成war包发布到服务器，附件肯定不能放到项目目录，我们可以将附件放到磁盘目录下，每次访问附件时，需要再转换一下，这样还是比较麻烦，还需要改ueditor源码实现图片显示、在线管理等。

本人比较懒，一直不想把第三方源码导到项目里，灵机一动想了一个偷懒的办法：

1）本地先扔一个tomcat，端口号：8081，在webapp下新建一个目录zyproject，启动后访问路径就是：http://127.0.0.1/zyproject

2）断点源码后发现，每次初始化编辑器，先访问ueconfig的时候，会传一个action过来，action可能有config（配置config.json路径）、listfile、listimage（这两个是ue编辑器在线管理显示已上传附件列表用的，后面会用到）。

我把config.json里，所有Prefix都加上一个前缀：http://127.0.0.1/zyproject。

如："imageUrlPrefix": "http://127.0.0.1:8081/zyproject", /* 图片访问路径前缀 */

config.json我也扔到附件的外部tomcat下了，所以在分布式配置中心加一条记录

INSERT INTO tb_config_server(akey,avalue,application,aprofile,label)
VALUES ('filePath','D:\\tomcat\\webapps\\zyproject','zyproject-web','dev','dev');

这样以后，所有上传、涂鸦等均无问题了。但仍然存在另一个问题，就是在线管理，uedtiro会将所有上传的图片或附件列表展示出来，供选择插入内容中。跟踪代码发现，在线管理会自动把rootPath也加到列表附件的路径中，比如一个图片路径是：http://127.0.0.1/zyproject/upload/ueditor/editor/20200301/1583058554450067578.png，在线管理会解释成这样：

http://127.0.0.1/zyproject/D:/tomcat/webapps/zyproject/upload/ueditor/editor/20200301/1583058554450067578.png，造成图片查询不到，于是对UeditorController改造如下(把rootPath给替换掉)：

 @Value("${filePath}")
    private String filePath;

    @RequestMapping("/ueconfig")
    public void config(String action,HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/json");
        //String rootPath = Thread.currentThread().getContextClassLoader().getResource("").getPath();
        String rootPath = filePath;
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            //解决ueditor 列出文件或图片，会把rootpapth加上的问题
            if( action!=null &&
                    (action.equals("listfile") || action.equals("listimage") ) ){
                rootPath = rootPath.replace("\\\\", "/");
                exec = exec.replaceAll(rootPath, "");
            }
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

最终效果如下：