SpringBoot整合Ueditor

简介

本博客实现SpringBoot整合Ueditor的功能，解决图片上传的问题：路径设置、图片大小设置等 源代码下载地址：https://download.csdn.net/download/lianghecai52171314/12917676

代码实现 第一步：新建SpringBoot项目，按如下所示添加依赖：

    org.springframework.boot
    spring-boot-starter-thymeleaf


    org.json
    json
    20190722


    commons-fileupload
    commons-fileupload
    1.3.1


    commons-codec
    commons-codec
    1.9


    commons-io
    commons-io
    2.4

第二步：下载Ueditor源代码并将打包后得到的dist目录中内容拷贝到SpringBoot项目中。

下载地址：https://github.com/fex-team/ueditor/tree/dev-2.0.0 注意：为了方便，我将config.json放在ueditor的根目录中了。

第三步：运行项目，访问路径http://localhost:8080/ueditor/index.html，打开如下页面则成功：

第四步：当用户上传的图片太大时，为了不让Ueditor不出现水平滚动轴，可以修改ueditor.all.js文件以及ueditor.all.mini.js文件（选做）：

第五步：修改ueditor.config.js文件，在其中指定Ueditor请求的服务器端的路径：

第六步：创建UEditorController

@Controller
@RequestMapping("/ueditor") 
public class UEditorController {
    @RequestMapping(value="/config")
    public void config(HttpServletRequest req,HttpServletResponse resp) {
        resp.setContentType("application/json");
        String rootPath = req.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = resp.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

上面请求的完整路径/ueditor/config，对应

第七步：修改config.json文件，为其添加一个表示上传资料基本路径的变量basePath。

第八步：修改BinaryUploader的save()方法的代码如下：

public static final State save(HttpServletRequest request,Map conf) {
    FileItemStream fileStream = null;
    boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;
    if (!ServletFileUpload.isMultipartContent(request)) {
        return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
    }
    ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
    if (isAjaxUpload) {
        upload.setHeaderEncoding("UTF-8");
    }
    try {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
        if (multipartFile == null) {
            return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
        }

        String savePath = (String) conf.get("savePath");
        //String originFileName = fileStream.getName();
        String originFileName = multipartFile.getOriginalFilename();
        String suffix = FileType.getSuffixByFilename(originFileName);

        originFileName = originFileName.substring(0,
                originFileName.length() - suffix.length());
        savePath = savePath + suffix;

        long maxSize = ((Long) conf.get("maxSize")).longValue();

        if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
            return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
        }

        savePath = PathFormat.parse(savePath, originFileName);

        String basePath = (String) conf.get("basePath");
        String physicalPath = basePath + savePath;

        InputStream is = multipartFile.getInputStream();
        State storageState = StorageManager.saveFileByInputStream(is,
                physicalPath, maxSize);
        is.close();

        if (storageState.isSuccess()) {
            storageState.putInfo("url", PathFormat.format(savePath));
            storageState.putInfo("type", suffix);
            storageState.putInfo("original", originFileName + suffix);
        }

        return storageState;
    }catch (IOException e) {
    }
    return new BaseState(false, AppInfo.IO_ERROR);
}

第九步：修改ConfigManage类

1、 修改成员变量configFileName的值为config.json的路径值：

private static final String configFileName = "static/ueditor/config.json";

2、 在getConfig()方法的return语句之前添加如下代码：

//将basePath塞进conf
conf.put("basePath", this.jsonConfig.getString("basePath"));
conf.put("savePath", savePath);
conf.put("rootPath", this.rootPath);

3、 为了让项目在打包后能正常够上传文件/图片，修改initEnv()方法用Class类的getResourceAsStream()来读取文件

private void initEnv() throws FileNotFoundException, IOException {
   File file = new File(this.originalPath);
   if (!file.isAbsolute()) {
      file = new File(file.getAbsolutePath());
   }
   this.parentPath = file.getParent();
   //String configContent = this.readFile(this.getConfigPath());
   String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream(configFileName)));
   try {
      JSONObject jsonConfig = new JSONObject(configContent);
      this.jsonConfig = jsonConfig;
   } catch (Exception e) {
      this.jsonConfig = null;
   }
}

4、修改getConfigPath()方法的代码如下：

private String getConfigPath() {
   try {
      //获取classpath下的config.json路径
      return this.getClass().getClassLoader().getResource(configFileName).toURI().getPath();
   } catch (URISyntaxException e) {
      return this.parentPath + File.separator + ConfigManager.configFileName;
   }
}

第十步：设置图片在Ueditor中回显：

因为我们把图片存在E盘了，而spring并没有对E盘目录进行映射。只有按如下所示在application.properties文件加入路径映射，上传成功的图片在Ueditor中才才能回显：

spring:
  servlet:
    #设置SpringBoot内置tomcat允许上传图片的大小
    multipart:
      max-file-size: 100MB
      max-request-size: 1000MB
  #路径映射，Ueditor上传图片成功后回显用
  resources:
    static-locations: classpath:static/,file:static/,file:E:/

第十一步：运行项目，上传图片，发现成功：