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

最新推荐文章于 2023-07-27 18:33:39 发布

单手入天象

最新推荐文章于 2023-07-27 18:33:39 发布

阅读量1.9k

点赞数 2

分类专栏： ueditor 文章标签： ueditor

本文链接：https://blog.csdn.net/weixin_42132143/article/details/103783987

版权

ueditor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

接口代码

@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>

    <!-- jq -->
    <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页面，发现图片上传页面似乎正常，还能选图片

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

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

怎么解决？

简单！

加个配置类配置虚拟路径的映射即可，原理就是当你发起一个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页面，根据喜好编辑文字，然后点击多图上传，上传好图片后点确定，已经可以上传图片到页面了

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

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

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;}

欢迎指出我的错误！

单手入天象

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
springboot 整合 ueditor 并实现文件上传（自定义上传路径）

1.先去官网下载 ueditor 的源码http://ueditor.baidu.com/website/download.html我们是java的springboot整合的，所以我们直接下载jsp版本的在springboot的resources目录下的satic下新建文件夹 ueditor，然后把刚下载压缩包解压进该目录接下来我们修改根目录下 ueditor.config....
复制链接

扫一扫

专栏目录