vue2+ueditor+springboot

最新推荐文章于 2025-11-12 07:35:14 发布

原创最新推荐文章于 2025-11-12 07:35:14 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ueditor #springboot

springboot 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍如何整合Vue2、Ueditor与SpringBoot，解决跨域问题及font-awesome资源加载，并提供多图上传解决方案。前端使用vue-ueditor进行UEditor封装，后端配置SpringBoot以支持图片等文件的上传。

本文主要阐述的是vue2+ueditor+springboot的整合。

此处记录下碰到的坑：

在使用springboot中font-awesome的处理

<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <configuration>
                    <nonFilteredFileExtensions>
                        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    </nonFilteredFileExtensions>
                </configuration>
            </plugin>

还有一些就是ueditor的图片上传跨域处理，单文件上传在不跨域的情况话没问题，跨域下则不行，对此ueditor的github上有一issues对此的讨论，具体哪个找不到了；

对于多图上传，增加以下代码即可

@Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

本例代码基于ueditor1.4.3.3源码改编。

前端： vue-ueditor对ueditor进行了简单的封装，实现双向绑定

后端：适配springboot配置文件读取，提取部分配置项

ueditor.config=config.json 配置文件存放地址（classpath）

ueditor.unified=true 是否统一上传路径（图片上传，视频上传...）

ueditor.upload-path=E:/upload/ 文件上传存放地址

ueditor.url-prefix=http://localhost:8080/upload/ 文件显示路径前缀

详见https://github.com/MigoNoSalt/vue-ueditor