springboot下ueditor上传功能的实现及遇到的问题

springboot下ueditor上传功能的实现及遇到的问题

前言

本文主要写的是：springboot下ueditor上传功能的实现及遇到的一些问题的处理

整体项目结构展示

Springboot整合ueditor及上传功能实现的具体步骤

1、下载ueditor-1.4.3.3

这个在官网下载就行，不过貌似utf-8版本的没有资源了，源码版的下了几次都中断了，最终我是从第三方下的

2、新建一个测试页面

ueditor的根目录下有一个index.html，用它就行，源码如下

获得整个html的内容

获得内容

写入内容

追加内容

获得纯文本

获得带格式的纯文本

判断是否有内容

使编辑器获得焦点

编辑器是否获得焦点

编辑器失去焦点

获得当前选中的文本

插入给定的内容

可以编辑

不可编辑

隐藏编辑器

显示编辑器

设置高度为300默认关闭了自动长高

SKLCh

获取草稿箱内容

清空草稿箱

创建编辑器

删除编辑器

3、引入上传所需的jar包

com.gitee.qdbp.thirdparty

ueditor

1.4.3.3

commons-codec

commons-codec

commons-fileupload

commons-fileupload

1.3.1

commons-io

commons-io

2.5

compile

org.json

json

4、新建上传文件保存目录文件夹，如下

其中的config.json是从ueditor-1.4.3.3的文件夹里拷过来，因为我发现默认上传文件路径就是config.json所在目录，而且springboot下我试了配置imagePathFormat并没有什么用。

5、新建UeditorController

用于读取ueditor.json配置文件，同时实现上传方法（当然这里我们直接使用了ueditor.jar的上传，因此显得很简单，但如果要我们自己写那就有一堆代码量了）

import com.baidu.ueditor.ActionEnter;

import org.springframework.stereotype.Controller;

import org.springframework.util.ClassUtils;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.PrintWriter;

/**

* 百度富文本编辑器

* 描述1：config.json中配置的如图片大小限制（imageMaxSize）文件类型等在页面js中已经验证过了，后台不需要在处理

* 描述2：使用ueditor.jar的话就不需要自己

* 描述3：config.json中imageUrlPrefix配置举例："imageUrlPrefix": "/fileupload/ueditor"

* 描述3：config.json中imagePathFormat配置举例："imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}"

* 描述4：imageUrlPrefix + imagePathFormat 为上传文件的访问路径

*

* zkh

* 2019年11月14日 9:09

*/

@Controller

public class UeditorController {

// /ueditor/jsp/config.json文件所在的父目录，上传文件默认根目录为config.json文件所在目录

private String configJsonParentPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/fileupload/ueditor";

/**

* UEditor初始化时会以get方式请求serverUrl地址，并且需要在action=config时返回UEditor配置文件信息

* 描述：使用ueditor.jar包中的ActionEnter的话，就不需要自己再去实现其上传功能，因为ActionEnter已经帮我们实现了

*/

@RequestMapping("ueditor")

public void getEditorConfig(HttpServletRequest request, HttpServletResponse response, String action) {

response.setContentType("application/json");

try {

String exec = new ActionEnter(request, configJsonParentPath).exec();

if(action!=null && (action.equals("listfile") || action.equals("listimage"))) {

exec = exec.replace(configJsonParentPath.substring(1), "/");

}

PrintWriter writer = response.getWriter();

writer.write(exec);

writer.flush();

writer.close();

} catch (Exception e) {

e.printStackTrace();

}

}

}

注意看注释

6、接着，我们需要将ueditor.config.js中的serverUrl配置为我们在第5步的那个controller，如下

7、最后还要在config.json中配置下我们上传的具体细节，下面以图片上传为例

这里我们需要关注重点理解的是 imageUrlPrefix 、imagePathFormat

1) 域名 + imageUrlPrefix + imagePathFormat 为当前文件的访问路径；

2）imageUrlPrefix是图片访问路径前缀，例如：http://localhost:8080/fileupload/ueditor，imageUrlPrefix就是其中的“/fileupload/ueditor”；

3）imagePathFormat是以imageUrlPrefix为根路径的文件存放的具体路径，例如：

http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg，imagePathFormat就是其中的“/image/20190202/121222.jpg”；

4）剩下其他参数就很明显了。

7、可能会遇到的问题

1、明明配置的文件最大为2048000，但是文件只有1M多点后台报错了？

解决：这是因为默认开启了springboot的上传，在application.properties中 spring.servlet.multipart.enabled=false 就可以了，或者也可以跳下它的默认最大值 spring.servlet.multipart.max-file-size=1MB，具体如下图：

2、明明修改了imagePathFormat，单还是保存在了原始的路径下？

解决：直接将config.json文件放到了我想保存文件的位置即可。

3、在线管理图片无法显示？

解决：在我们上面的UeditorController中其实已经解决了，就是当action=listfile或者action=listimage时将new ActionEnter(request, configJsonParentPath).exec()得到的字符串中的configJsonParentPath路径替换为空字符串即可，如下

最后启动服务，打开http://localhost:8080/ueditor/index.html页面测试，效果如下图：

总结

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。