springboot 集成 ueditor 并上传图片

爱被打了一巴掌 2023-02-28 15:17 28阅读 0赞

# 项目搭建 #

新建一个 springboot 项目，我这里的 springboot 版本依赖是:

<parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.2.5.RELEASE</version>
            <relativePath/>
        </parent>

web 依赖是 :

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>

从 ueditor 官网 : [http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html] 下载相关包 :

![download-ueditor][]

然后把下载的 zip 解压到一个本地目录，我这里解压到 `C:\Users\asus\Desktop\tool-demo\ueditor\web\ueditor` :

![unzip-ueditor][]

由于 ueditor jsp 版本需要 commons-codec、commons-fileupload、commons-io、json、ueditor 五个 jar 包，前四个 jar 包可以在 maven 中找到，但是最后一个在 maven 中是没有的，在项目根目录新建 lib 包，把 ueditor-1.1.2.jar 复制到 lib 目录，然后在 maven 中引入这五个 jar 包的依赖 :

<dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.9</version>
            </dependency>
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20190722</version>
            </dependency>
            <dependency>
                <groupId>com.baidu</groupId>
                <artifactId>ueditor</artifactId>
                <version>1.1.2</version>
                <scope>system</scope>
                <systemPath>${basedir}/lib/ueditor-1.1.2.jar</systemPath>
            </dependency>

在 application.yml 中配置端口、项目名、静态文件等信息:

server:
      port: 8001
      servlet:
        context-path: /myUeditor
    spring:
      # 使用外部静态资源文件, 不用把静态资源打到 jar 包中运行
      mvc:
        # 访问路径
        static-path-pattern: /myHtml/**
      resources:
        # 把那些位置的静态资源文件加载到容器中 
        # 最后以斜杠结尾
        static-locations: file:C:/Users/asus/Desktop/tool-demo/ueditor/web/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
    
    
    com:
      xh:
        ueditor:
          config:
            # ueditor config.json 所在目录
            path: C:\Users\asus\Desktop\tool-demo\ueditor\web\ueditor\jsp
          image:
            path:
              #  图片保存地址前面部分(除去 springboot 静态文件部分)
              base: C:\Users\asus\Desktop\tool-demo\ueditor\web\
              # 访问该 url 的后缀
              url: /ueditor/image

按照 ueditor 官网文档 : [http://fex.baidu.com/ueditor/][http_fex.baidu.com_ueditor] 搭建一个简单的富文本编辑器页面 index.html :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ueditor</title>
    </head>
    <body>
    
    <div>
        h1
    </div>
    
    
    <script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script>
    
    <div>
        h2
    </div>
    
    
    <script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
    
    <script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
    
    <script type="text/javascript"> var ue = UE.getEditor('container', { toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold','italic', //斜体 'underline', //下划线 'strikethrough', //删除线 'simpleupload', //单图上传 'forecolor', //字体颜色 'insertorderedlist', //有序列表 'insertunorderedlist' //无序列表 ] ], autoHeightEnabled: true, autoFloatEnabled: true }); // //对编辑器的操作最好在编辑器ready之后再做 // ue.ready(function () { // //设置编辑器的内容 // ue.setContent('hello'); // //获取html内容，返回: <p>hello</p> // var html = ue.getContent(); // //获取纯文本内容，返回: hello // var txt = ue.getContentTxt(); // }); </script>
    
    </body>
    </html>

启动 springboot 项目，通过 `http://127.0.0.1:8001/myUeditor/myHtml/index.html` 访问富文本编辑器。

# 实现图片上传 #

按照上面的步骤访问项目富文本编辑器页面时，在浏览器控制台会出现一个错误:

![ueditor-upload-img-error][]

出现该错误就表示不能上传图片，要想实现自定上传图片功能需要一些自定义配置。

主要参照 :

1.  [http://fex.baidu.com/ueditor/\#start-config][http_fex.baidu.com_ueditor_start-config]
2.  [http://fex.baidu.com/ueditor/\#server-config][http_fex.baidu.com_ueditor_server-config]

具体步骤 :

1.  在后台新建一个 controller, 代码如下 :

import com.baidu.ueditor.ActionEnter;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    
    import javax.servlet.http.HttpServletRequest;
    import java.io.*;
    import java.time.LocalDate;
    import java.time.format.DateTimeFormatter;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    /**
     * UeditorController
     *
     * @author xh
     * @date 2020/7/21
     */
    @RestController
    public class UeditorController {
    
        /**
         * configPath 为 ueditor jsp 中 config.json 所有在配置文件路径。
         */
        @Value("${com.xh.ueditor.config.path}")
        private String configPath;
    
        /**
         * 图片保存地址前面部分(除去 springboot 静态文件部分)
         */
        @Value("${com.xh.ueditor.image.path.base}")
        private String baseImagePath;
    
        /**
         * 访问该 url 的后缀
         * 即可以通过 http://ip:port/projectName/urlImagePath/../xx.jpg 访问图片
         * 在 ueditor 中也是通过这个 ip 来访问图片的
         */
        @Value("${com.xh.ueditor.image.path.url}")
        private String urlImagePath;
    
        @ResponseBody
        @RequestMapping("/config")
        public Object config(HttpServletRequest request) {
            String action = request.getParameter("action");
            // 处理初始化加载配置文件
            if ("config".equals(action)) {
                return new ActionEnter(request, this.configPath).exec();
            }
            // 处理上传文件 -- 这里的 uploadimage 对应 ueditor/jsp/config.json 中的 imageActionName
            if ("uploadimage".equals(action)) {
                MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
                // 这里的 upfile 对应 ueditor/jsp/config.json 中的 imageFieldName
                MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");
                String dateStr = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyyMMdd"));
                if (multipartFile == null) {
                    return null;
                }
                // 图片名称
                String imgName = multipartFile.getOriginalFilename() == null || multipartFile.getOriginalFilename().trim().length() == 0 ? "fileName" : multipartFile.getOriginalFilename();
                // 后缀
                String fileSuffix = imgName.substring(imgName.indexOf("."));
                // {time}{rand:6}
                String uuid = System.currentTimeMillis() + UUID.randomUUID().toString().replace("-", "").substring(0, 6);
                // 文件相对路径
                String relativePathFileName = this.urlImagePath + File.separator + dateStr + File.separator + uuid + fileSuffix;
                // 绝对路径
                String absolutePathFileName = this.baseImagePath + File.separator + relativePathFileName;
                File file = new File(absolutePathFileName);
                if (!file.getParentFile().exists()) {
                    // 生成文件父目录
                    //noinspection ResultOfMethodCallIgnored
                    file.getParentFile().mkdirs();
                }
                try {
                    // 保存到磁盘
                    multipartFile.transferTo(file);
                } catch (IOException e) {
                    return null;
                }
                // 封装返回值
                Map<String, Object> map = new HashMap<>();
                // original - 对应 img 标签中的 alt 属性,代替图片的文字
                map.put("original", imgName);
                // url - 对应 img 标签中的 src 和 _src 属性，`src = imageUrlPrefix + url` imageUrlPrefix 在前端配置为 : http://ip:port/projectName
                // windows 下 url 中的 File.separator 是 \ ==> 有可能导致 ueditor 解析 json 出错
                map.put("url", relativePathFileName.replaceAll("\\\\", "/"));
                // title - 对应 img 标签中的 title 属性，表示鼠标移动到图片上显示什么什么
                map.put("title", imgName);
                // state 必须为 SUCCESS, 不然生成图片会失败
                map.put("state", "SUCCESS");
                return map;
            }
            return null;
        }
    
    }

修改 ueditor 配置，使其初始化时使用 前面那个 controller 返回的 json，这步的作用是去掉前面浏览器控制台出现的错误。

ueditor 默认的 serverUrl 是这样的 :

![defaultserverUrl][]

其默认访问的是 ueditor/jsp 目录下 的 controller.jsp。把它修改为访问刚刚那个 controller 中 config 接口，即修改为 : http://127.0.0.1:8001/myUeditor/config

然后重启项目就发现没有前面浏览器中的那个错误了。

但是这时候上传图片会出现上传失败，本地保存成功弹窗。

![uploadFailAndLocalSaveSuccess][]

打开 ueditor.all.js，搜索关键字 `simpleupload.loading`，如下:

![uploadImageDebugger][]

然后在图中准备 debugger 位置加入处理代码后如下：

然后在 ueditor/jsp/config.json 中修改图片回显地址前缀配置:

"imageUrlPrefix": "http://127.0.0.1:8001/myUeditor/myHtml", /* 图片访问路径前缀 */

使得这里的前缀加上返回 json 中的 url 可以访问对应图片。

然后重启项目即可以上传图片了。

[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[download-ueditor]: /images/20230209/74b4b979220941c6964ad8bdca0f5d2e.png
[unzip-ueditor]: /images/20230209/3c20052972e042798ba303b5aaa4b4b3.png
[http_fex.baidu.com_ueditor]: http://fex.baidu.com/ueditor/
[ueditor-upload-img-error]: /images/20230209/a3c07416cc99445f9ff1454f8d55f597.png
[http_fex.baidu.com_ueditor_start-config]: http://fex.baidu.com/ueditor/#start-config
[http_fex.baidu.com_ueditor_server-config]: http://fex.baidu.com/ueditor/#server-config
[defaultserverUrl]: /images/20230209/1cfbf8d621b34a1ca3a1df5afe0b5aec.png
[uploadFailAndLocalSaveSuccess]: /images/20230209/63004664861643cc9074b95dcf84da2a.png
[uploadImageDebugger]: /images/20230209/c6ee99447e094fe1b59283925f0610dd.png