SpringMVC整合UEditor

￡神魔★判官ぃ 2022-05-12 10:22 106阅读 0赞

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

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

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

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

![70][]

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

需要注入依赖

<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复制到前端文件下，目录如下

![70 1][]

然后就是修改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接口,从而让前端能够知道我要进行图片上传。

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

![70 2][]

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

config.json

![70 3][]

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

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

希望能帮助到你

[https_www.cnblogs.com_yinz_p_5502405.html]: https://www.cnblogs.com/yinz/p/5502405.html
[70]: /images/20220512/f9468a2f75ab4789b4388b7384119cf5.png
[https_ueditor.baidu.com_website_download.html]: https://ueditor.baidu.com/website/download.html
[70 1]: /images/20220512/c85a71d047644a13bd4ad26c22f696e5.png
[70 2]: /images/20220512/3272d1fb1c644c2ea63be921a7df7acc.png
[70 3]: /images/20220512/42ee25b401bd4223b913db2d8153f131.png
[http_fex.baidu.com_ueditor_server-path]: http://fex.baidu.com/ueditor/#server-path