springboot 整合 ueditor 并实现文件上传（自定义上传路径）

我会带着你远行 2023-10-08 11:16 3阅读 0赞

1.先去官网下载 ueditor 的源码 [http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

我们是java的springboot整合的，所以我们直接下载jsp版本的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70][]

在springboot的resources目录下的satic下新建文件夹 ueditor，然后把刚下载压缩包解压进该目录

![20191231155618163.png][]

接下来我们修改根目录下 ueditor.config.js 这个文件

因为springboot默认是不支持jsp的，而这个又是jsp版本的，我们需要将这个调用jsp的接口，换成我们自己写的接口

（该接口其实就是为了调用jsp目录下的config.json，我们自己写一个接口读取该JSON文件到String ，然后返回即可）

（ueditor官方要求这个json文件来读取配置各种文件的上传等操作，不改的话文件上传功能用不了）

![2019123116024690.png][]

接口代码

@Controller
    @RequestMapping("/ueditor")
    public class UeditorController {
    
    
        @RequestMapping("/config")
        @ResponseBody
        public String config(HttpServletRequest request, HttpServletResponse response) {
            String json = "";
            response.setContentType("application/json");
            // 获取项目在磁盘的绝对路径
            String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
            try {
                // 将josn文件读到Stirng
                json = IOUtils.toString(new FileInputStream(new File(path + "/static/ueditor/utf8-jsp/jsp/config.json")), Charsets.UTF_8.toString());
            } catch (Exception e) {
                e.printStackTrace();
            }
            return json;
        }
    }

记得修改config.json配置文件后，要重启项目，最好清一下浏览器缓存

2.编写一个简单的html页面，展示下ueditor的效果

其实引入ueditor的js文件，然后在js里实例化ueditor即可。

js里下面那一部分代码是为了手动指定上传文件调用的接口（不同文件类型不同接口）

**肯定有人疑问，这是第三方写的插件，我怎么上传文件，他上传到哪？**

\* 其实方法有很多种，我这里选择自己编写接口实现上传，原理很简单，先在js里覆盖ueditor官方配置文件的接口，然后编写我们自定义的接口，将文件上传到我们自定义的位置

<!DOCTYPE HTML>
    <html lang="en-US">
    
    <head>
        <meta charset="UTF-8">
        <title>ueditor编辑器</title>
    
        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    
        
        <script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/ueditor.config.js"></script>
        
        <script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/ueditor.all.js"></script>
        <script type="text/javascript" charset="utf-8" src="/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    
    </head>
    
    <body>
    <form action="/ueditor/submit" method="post">
        标题：<input type="text" name="title"/><br/>
    
        
        <div id="ueditor" name="ueditor" style="width: 600px"></div>
    
        <button type="submit">提交</button>
    </form>
    
    
    <script type="text/javascript">
        $(function() {
    
            var ue = UE.getEditor('ueditor');
    
            // 手动指定上传文件调用的接口（不同文件类型不同接口）
            UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
            UE.Editor.prototype.getActionUrl = function(action) {
                // 这里很重要，很重要，很重要，要和配置中的imageActionName值一样
                if(action == 'uploadimage'){
                    // 这里调用后端我们写的图片上传接口
                    return '/ueditor/uploadImageData';
                }else if(action == 'uploadfile'){
                    return '/ueditor/uploadFileData';
                }else{
                    return this._bkGetActionUrl.call(this, action);
                }
            }
    
        });
    </script>
    
    
    
    </body>
    </html>

3.**然后重点来了，**自定义实现文件上传的代码，这里放的是图片的上传接口，ueditor他还有 file文件、涂鸦、截图、视频 等类型文件的上传，分别调用不同的接口，一样是在上面那段 js 代码那里覆盖，不同文件类型接口代码几乎一样，只是不同类型文件可能需要做不同的处理罢了，这里我就放其中一个上传图片的

@RequestMapping("uploadImageData")
        @ResponseBody
        public Map<String,String> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {
            //文件原名称
            String fileName = upfile.getOriginalFilename();
            // 保存文件的新名字
            String nowName = UUID.randomUUID()+fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));
            String uploadPath = "";
            if(!upfile.isEmpty()){
                String path = "F:/ueditor/upload/image/";
                File f = new File(path);
                if(!f.exists()){
                    // 第一次上传文件新建文件夹
                    f.mkdirs();
                }
                uploadPath = path+nowName;
                //按照路径新建文件
                File newFile = new File(uploadPath);
                if(!newFile.exists()){
                    newFile.createNewFile();
                }
                //复制
                FileCopyUtils.copy(upfile.getBytes(), newFile);
            }
            //返回结果信息(UEditor官方要求这个json格式)
            Map<String,String> map = new HashMap<String,String >();
            //是否上传成功
            map.put("state", "SUCCESS");
            //现在文件名称
            map.put("title", nowName);
            //文件原名称
            map.put("original", fileName);
            //文件类型 .+后缀名
            map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
            //文件路径
            // map.put("url", uploadPath);    // 浏览器不能直接访问项目外目录的图片等文件，需要做虚拟路径映射
            map.put("url", "/PathImage/"+nowName);  // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径
            //文件大小（字节数）
            map.put("size", upfile.getSize()+"");
            return map;
        }

这里解释下上面的代码：

1）String path = "F:/ueditor/upload/image/"; 这行我们是直接指定了上传的路径是本地F盘的XXX，用我这种自定义的接口，就不同管config.json配置文件的路径了

2）还有，这个方法（也就是我们覆盖了上传的这个接口），必须要返回指定格式的json，这是editor官方的规范，不然上传的图片显示异常

4.这时候我们打开刚才那个html页面，发现图片上传页面似乎正常，还能选图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 1][]

但是，现实总是残忍的，等你点击开始上传，提示说上传成功，你点击确认，却发现图片回显不了，明明从路径上看是对的，为什么前台还报了个错，没错！

其实原因有两个，浏览器默认做了处理，不能访问该项目目录外的静态资源（例如图片），而且springboot默认也是只能访问指定的静态资源目录，所以就算你后台代码正确，文件也正常上传成功，但是前台报错，并且页面显示不出图片

![20191231172610843.png][]

![20191231172651840.png][]

怎么解决？

简单！

加个配置类配置虚拟路径的映射即可，原理就是当你发起一个url，里面对应的一段url对自动映射为你指定的本地绝对路径（注意这里要跟你上面的上传绝对路径对上。你也可以写到json文件，然后统一读取，可以保持一致性）

@Configuration
    public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {
        /**
         * Spring Boot中有默认的静态资源访问路径，浏览器也不允许访问项目目录外的资源文件
         * 添加一些虚拟路径的映射
         * 设置静态资源路径和上传文件的路径
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            // /** 表示该目录下所有文件
            registry.addResourceHandler("/PathImage/**").addResourceLocations("file:/F:/ueditor/upload/image/");
            registry.addResourceHandler("/PathFile/**").addResourceLocations("file:/F:/ueditor/upload/file/");
            super.addResourceHandlers(registry);
        }
    }

我这里放了上传图片和文件的虚拟路径映射，还有视频等自行根据格式添加即可

5.到这里基本已经可以了页面，上面我的html页面还有发起一个post请求，是为了测试后台获取的ueditor数据，这里放接口代码

@RequestMapping("/submit")
        @ResponseBody
        public String submit(HttpServletRequest request){
            String title = request.getParameter("title");
            String ueditor = request.getParameter("ueditor");
            String result = "标题："+title+"\n"+ueditor;
            return result;
        }

6.好！万事俱备，开始测试

运行项目，访问上面的html页面，根据喜好编辑文字，然后点击多图上传，上传好图片后点确定，已经可以上传图片到页面了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 2][]

然后点击提交按钮，可以在接口上看到我们由前那段传来的数据，还有在页面返回的效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 3][]

测试成功，如果你没有成功，那你肯定是上面某个步骤漏了，建议再仔细看一遍！

7.如果你想修改编辑器的宽高，可以直接到 ueditor.config.js 搜索关键字，然后放开注释，写你要的值

initialFrameWidth ：宽度
    initialFrameHeight ：高度

8.禁止显示元素路径 ，到 ueditor.config.js 搜索关键字

elementPathEnabled

9.禁止自动保存的功能

1）在ueditor.config.js，将 enableAutoSave 的注释去掉并设置成false，saveInterval 的注释也去掉设置成0；

2）修改ueditor.all.js，在'contentchange': function () \{函数的第一行添加代码：

if (!me.getOpt('enableAutoSave')) \{return;\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 4][]

欢迎指出我的错误！

[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231155228202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw==,size_16,color_FFFFFF,t_70
[20191231155618163.png]: https://img-blog.csdnimg.cn/20191231155618163.png
[2019123116024690.png]: https://img-blog.csdnimg.cn/2019123116024690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231174912120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw==,size_16,color_FFFFFF,t_70
[20191231172610843.png]: https://img-blog.csdnimg.cn/20191231172610843.png
[20191231172651840.png]: https://img-blog.csdnimg.cn/20191231172651840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191231174426493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191231174625244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191231180451328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEzMjE0Mw==,size_16,color_FFFFFF,t_70