SpringMVC整合UEditor

由于项目需要，前端需要在线编辑文档，那么就要提供丰富一点的编辑器。找了半天，前端跟我说只能用Ueditor。这还是个国产的，baidu的。那个API我反正是看不懂。整合了各方博客资料，终于用了两天把这个东西搞出来了。说真的，网上的博客是真的难看懂。

其实搞来搞去，只要照着这个https://www.cnblogs.com/yinz/p/5502405.html，这个博客来就行了。

主要用到的config.json和ueditor.config.js。我是采用的修改源码的方式。所以需要将UEditor的示例源码，放到自己项目中来。

第一步，将百度源码放到自己的项目中来

可以到UEditor官网去下载，https://ueditor.baidu.com/website/download.html，我下载的是完整源码版。解压源码路径为\ueditor-1.4.3.3\jsp\src。

需要注入依赖

<!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

当然如果你不是springMVC或者springBoot你也可以到\ueditor-1.4.3.3\jsp\src\lib这个路径下找到需要支持的jar，导入即可。

第二步，新建一个UeditorController类和修改ConfigManager类

Ueditor

@Controller
@RequestMapping("/ueditor")
public class UeditorController {

    @RequestMapping("/dispatch")
    public void config(HttpServletRequest request,  HttpServletResponse response) {
           // response.setContentType("application/json");              
            String rootPath = request.getSession().getServletContext().getRealPath("/");
            response.setHeader("Content-Type" , "text/html");
            try {
                String a = request.getRequestURI();
                    String exec = new ActionEnter(request, rootPath).exec();
                    PrintWriter writer = response.getWriter();
                    writer.write(exec);
                    writer.flush();
                    writer.close();
            } catch (IOException e) {
                    e.printStackTrace();
            }
            
    }
}

ConfigManager

private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
		
		rootPath = rootPath.replace( "\\", "/" );
        
        this.rootPath = rootPath;
        this.contextPath = contextPath;
        
        /*if ( contextPath.length() > 0 ) {
            this.originalPath = this.rootPath + uri.substring( contextPath.length() );
        } else {
            this.originalPath = this.rootPath + uri;
        }*/
        
        this.originalPath = rootPath + "static" + File.separator  +
                "ueditor" +File.separator + "jsp" + File.separator + "controller.jsp";
        ///EdwManage/src/main/webapp/static/ueditor/jsp/controller.jsp
        
        this.initEnv();
        
		
	}

这个类的作用就是用来与前端进行交流的唯一通道，copy一下就好了

第三步，如果前端没有\ueditor-1.4.3.3\jsp\config.json和\ueditor-1.4.3.3\jsp\controller.jsp这两个文件，那么就把整个jsp复制到前端文件下，目录如下

然后就是修改ueditor.config.js和jsp\config.json，即可。修改如下

ueditor.config.js

var getRootPath = function (){
        //获取当前网址
        var curWwwPath=window.document.location.href;
        //获取主机地址之后的目录
        var pathName=window.document.location.pathname;
        
        var pos=curWwwPath.indexOf(pathName);
        //获取主机地址
        var localhostPaht=curWwwPath.substring(0,pos);
        //获取带"/"的项目名，如：/uimcardprj
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
        
        return(localhostPaht+projectName);
    }

    /**
     * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
     * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
     * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
     * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
     * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var applicationPath = getRootPath();
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    var serverURL = applicationPath;
    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: serverURL + "/ueditor/dispatch"

主要的目的是修改serverUrl，让它能够识别后台UEditorController接口,从而让前端能够知道我要进行图片上传。

到这一步，你应该能看到如下

只是说你没有配置config.json，上传图片是无法显示的。

config.json

修改imagePathFormat即可，imageUrlPrefix即为项目访问前缀，比如我的http://localhost/8080/Test。也可以不加，应该UEditor默认是网站根目录。这个可以参考百度的APIhttp://fex.baidu.com/ueditor/#server-path。这个里面做了很详细的说明。

最后由于我的项目是war包到Tomcat下运行的，但是上传的图片是保存到项目里的。也就是说每更新一次就要将图片复制备份一下，除非是将图片放到其他文件夹下。但是API建议说使用根路径。如果项目更新幅度不大，还是不要修改吧。由于我的项目没有这样做，所以就没有测试。但是参考API还是能做到的。

希望能帮助到你