springboot ueditor 整合篇

李浩洋93

已于 2024-05-13 14:45:12 修改

阅读量1.8k

点赞数

分类专栏： Java 文章标签： springboot ueditor 集成 ueditor 七牛云

于 2018-06-12 16:11:49 首次发布

本文链接：https://blog.csdn.net/u011164906/article/details/80664644

版权

Java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、上传文件到本地版本

项目地址：GitHub - weiangongsi/ueditor-spring-boot-starter: 百度编辑器上传文件到本地，支持自定义上传

文件导入
- 新建springboot项目
- 不需要下载本项目，jar包已经上传到maven仓库
- pom文件引入
```
     <dependency>
              <groupId>com.dcssn</groupId>
              <artifactId>ueditor-spring-boot-starter</artifactId>
              <version>0.1.0</version>
     </dependency>
```
- 下载百度编辑器源码链接：最新版本1.4.3.3 Jsp UTF-8版本
- 创建ueditor目录 resources > static > ueditor ，将源码拷贝到目录中
- jsp目录只保留 config.json 文件即可
项目配置
- application.yml
```
ue:
  config-file: static/ueditor/jsp/config.json #resources目录下配置文件的位置
  server-url: /ueditor.do #服务器统一请求接口路径
  url-prefix: /file/ #"/"结尾
  physical-path: C:/upload/ #存储文件的绝对路径 必须使用标准路径"/"作为分隔符
```
- static/ueditor/ueditor.config.js
  将serverUrl 改为application.yml 中ue.server-url 的值
- config.json
  图片访问路径前缀（imageUrlPrefix）、视频访问路径前缀、文件访问路径前缀不要赋值，会影响回显，其余参数可以按照百度文档修改
- 上传文件大小
  spring上传文件默认最大1MB，上传文件大小会先被spring限制，config.json文件大小限制要小于spring的设置，我们可以将spring的限制设大点
```
  spring:
    servlet:
      multipart:
        max-file-size: 100MB
```

测试

新建Controller 添加mapping

   @GetMapping("/ue")
   public String index() {
       return "ue";
   }

在templates下新建页面ue.html

   <!DOCTYPE html>
   <html lang="UTF-8" xmlns:th="http://www.springframework.org/schema/jdbc">
   <head>
       <meta charset="UTF-8"/>
       <title>ueditor</title>
       <style>
           #editor {
               width: 1024px;
               height: 500px;
           }
       </style>
   </head>
   <body>
   <div id="editor" type="text/plain"></div>
   <script th:src="@{/ueditor/ueditor.config.js}"></script>
   <script th:src="@{/ueditor/ueditor.all.min.js}"></script>
   <script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
   <script>
       UE.getEditor('editor');
   </script>
   </body>
   </html>

如有问题可以加群：806893930 ，我第一次建群，里面就几个人，欢迎你的加入

参考百度文档
代码只修改了上传和获取文件列表的方法，添加了服务器统一请求接口路径的拦截器，没有别的改动，百度文档
项目案例
GitHub - weiangongsi/ueditor-spring-boot-starter-example: ueditor整合springboot 上传文件到本地

二、上传文件到七牛云版本

项目地址：https://github.com/weiangongsi/ueditor-qiniu-spring-boot-starter

文件导入
- 新建springboot项目
- 不需要下载本项目，jar包已经上传到maven仓库
- pom文件引入
```
     <dependency>
              <groupId>com.dcssn</groupId>
              <artifactId>ueditor-qiniu-spring-boot-starter</artifactId>
              <version>0.0.1</version>
     </dependency>
```
- 下载百度编辑器源码链接：最新版本1.4.3.3 Jsp UTF-8版本
- 创建ueditor目录 resources > static > ueditor ，将源码拷贝到目录中
- jsp目录只保留 config.json 文件即可
项目配置
- application.yml
```
   ue:
     config-file: static/ueditor/jsp/config.json #resources目录下配置文件的位置
     server-url: /ueditor.do #服务器统一请求接口路径和ueditor.config.js中的serverUrl要一致
     qiniu:
       accessKey: 8Dw03nJLiST7RvsWtPca1JHDgeu8O0BA******
       secretKey: LHkGDHPZCyrUk5BxG7vC5sLY9LmDxf******
       cdn: http://image.xxx.com/ #CDN 加速域名 最后面的斜杠（/）不能少
       bucket: image #存储空间
       zone: zone0 #zone代表机房的位置
```
  其中关于Zone对象和机房的关系如下：
  
  机房 Zone对象
  华东 zone0
  华北 zone1
  华南 zone2
  北美 zoneNa0
  东南亚 zoneAs0
- static/ueditor/ueditor.config.js
  将serverUrl 改为application.yml 中ue.server-url 的值
- config.json
  图片访问路径前缀（imageUrlPrefix）、视频访问路径前缀、文件访问路径前缀不要赋值，会影响回显，其余参数可以按照百度文档修改
- 上传文件大小
  spring上传文件默认最大1MB，上传文件大小会先被spring限制，config.json文件大小限制要小于spring的设置，我们可以将spring的限制设大点
```
  spring:
    servlet:
      multipart:
        max-file-size: 100MB
```

机房	Zone对象
华东	zone0
华北	zone1
华南	zone2
北美	zoneNa0
东南亚	zoneAs0

测试

新建Controller 添加mapping

   @GetMapping("/ue")
   public String index() {
       return "ue";
   }

在templates下新建页面ue.html

   <!DOCTYPE html>
   <html lang="UTF-8" xmlns:th="http://www.springframework.org/schema/jdbc">
   <head>
       <meta charset="UTF-8"/>
       <title>ueditor</title>
       <style>
           #editor {
               width: 1024px;
               height: 500px;
           }
       </style>
   </head>
   <body>
   <div id="editor" type="text/plain"></div>
   <script th:src="@{/ueditor/ueditor.config.js}"></script>
   <script th:src="@{/ueditor/ueditor.all.min.js}"></script>
   <script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
   <script>
       UE.getEditor('editor');
   </script>
   </body>
   </html>

如有问题可以加群：806893930 ，我第一次建群，里面就几个人，欢迎你的加入