vue2+ueditor+springboot

来源：互联网发布：关系数据库是什么编辑：程序博客网时间：2024/06/14 00:40

本文主要阐述的是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

阅读全文

0 0