SpringBoot整合百度Ueditor

SpringBoot整合百度Ueditor

1.将下载好的资源文件放入static文件夹下的ueditor文件夹

2.新建一个UeditorConfig

import lombok.Data;
import org.springframework.boot.autoconfigure.domain.EntityScan;

/**
 *
 * @author Administrator
 * {state：”状态”，url：”回显路径”，size：”大小”，type：”类型”，title：”文件title”，original：”名称”}
 */

@Data
@EntityScan
public class UeditorConfig {
    private String state;
    private String url;
    private long size;
    private String type;
    private String title;
    private String original;
}

 3.新建一个读取配置的Controller:UeditorController

import java.io.*;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.*.*.entity.UeditorConfig;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author Administrator
 *
 */

@Controller
public class UeditorContorller {

    private static final Logger log = LoggerFactory.getLogger(UeditorContorller.class);


    /**
     * 根目录请求
     * @author Administrator
     * @version V1.0
     */

    @ResponseBody
    @RequestMapping("ueditorConfig")
    public Object ueditorConfig(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response, String action) {
        switch (action) {
            case "config":
                log.info("读取config.json");
                Object uEditorConfig = this.getUEditorConfig(response);
                return uEditorConfig;
            case "uploadimage":
                log.info("图片上传");
                String returnJson = this.uploadimage(upfile, request, response);
                return returnJson;
        }
        return "请求失败";
    }

    /**
     * 读取ueditor/config.json
     * @author Administrator
     * @version V1.0
     */
    public Object getUEditorConfig(HttpServletResponse response) {
        try {
            response.setContentType("application/json;charset=utf-8");
            Resource resource = new ClassPathResource("static/ueditor/jsp/config.json");
            BufferedReader br = new BufferedReader(new FileReader(resource.getFile()));
            StringBuilder stringBuilder = new StringBuilder();
            String configJson;
            while ((configJson = br.readLine()) != null) {
                stringBuilder.append(configJson);
            }
            return stringBuilder.toString();
        } catch (Exception e) {
            log.error("读取ueditor/config.json异常" + e);
            return "error";
        }
    }

    /**
     * 上传图片
     * @author Administrator
     * @version V1.0
     */
    public String uploadimage(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response) {
        UeditorConfig ueditorConfig = new UeditorConfig();
        try {
            try {
                String fileName = upfile.getOriginalFilename();
                String suffixName = fileName.substring(fileName.lastIndexOf("."));
                fileName = UUID.randomUUID()+suffixName;
                String visitUrl = "http://localhost:8080/"+fileName;
                //自定义存放路径
                String filePath = "D:/gitWork/xxx/target/classes/upload/";
                try {
                    upfile.transferTo(new File(filePath+fileName));
                } catch (Exception e) {
                    e.printStackTrace();
                }

                // 返回状态码
                ueditorConfig.setState("SUCCESS");
                ueditorConfig.setUrl(visitUrl);
                ueditorConfig.setSize(upfile.getSize());
                ueditorConfig.setOriginal(fileName);
                ueditorConfig.setType(upfile.getContentType());

            } catch (Exception e) {
                e.printStackTrace();
            }

        } catch (Exception e) {
            e.printStackTrace();
            ueditorConfig.setState("ERROR");
        }
        String returnJson = JSON.toJSONString(ueditorConfig);
        log.info("图片上传返回字符===>>>" + returnJson);
        return returnJson;
    }
}

 4.引入资源后将jsp文件夹下lib包注入项目

5.修改ueditor.config.js

// 服务器统一请求接口路径
, serverUrl: "http://localhost:8080/ueditorConfig"

6.在application.yml中添加上传文件的路径映射

spring:
  resources:
    static-locations: classpath:/static/,classpath:/upload/

 7.在需要用到Ueditor的页面中引入js文件与初始化

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<!-- 配置文件 -->
<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');
</script>

完成单图片上传与多图片上传