springboot 集成 ueditor 并上传图片

最新推荐文章于 2024-05-28 08:27:58 发布

ChaseDreamBoy

最新推荐文章于 2024-05-28 08:27:58 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： java ueditor

本文链接：https://blog.csdn.net/qq_37502106/article/details/107494668

版权

前端专栏收录该内容

1 篇文章 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 下载相关包 :

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 包的依赖 :

        <!-- ueditor jsp 需要的 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>
        <!-- ueditor jsp 需要的 jar 包 -->

在 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/ 搭建一个简单的富文本编辑器页面 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

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

主要参照 :

具体步骤 :

在后台新建一个 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 位置加入处理代码后如下：

                function callback(){
                    try{
                        var link, json, loader,
                            body = (iframe.contentDocument || iframe.contentWindow.document).body,
                            result = body.innerText || body.textContent || '';
                        console.log(result)
                        console.log(result.substring(result.indexOf('{')))
                        debugger
                        // json = (new Function("return " + result))();
                        json = JSON.parse(result.substring(result.indexOf('{')));
                        link = me.options.imageUrlPrefix + json.url;
                        if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            // title - 对应 img 标签中的 title 属性，表示鼠标移动到图片上显示什么
                            loader.setAttribute('title', json.title || '');
                            // original - 对应 img 标签中的 alt 属性,代替图片的文字
                            loader.setAttribute('alt', json.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                            showErrorLoader && showErrorLoader(json.state);
                        }
                    }catch(er){
                        console.log(er)
                        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
                    }
                    form.reset();
                    domUtils.un(iframe, 'load', callback);
                }

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

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

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

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

ChaseDreamBoy

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
springboot 集成 ueditor 并上传图片

项目搭建新建一个 springboot 项目，我这里的 springboot 版本依赖是: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.5.RELEASE</version>
复制链接

扫一扫