SpringBoot下thymeleaf使用UEditor

以前传统web工程下使用UEditor是继承ActionEnter实现自己的MyActionEnter来实现自定义文件上传路径的，具体可以参考：UEditor自定义图片/文件上传路径与回显

本文主要是SpringBoot+thymeleaf环境下使用UEditor。

【1】本地环境下不指定上传路径

① 引入pom依赖

<!-- 百度编辑器 -->
<dependency>
	<groupId>com.gitee.qdbp.thirdparty</groupId>
	<artifactId>ueditor</artifactId>
	<version>1.4.3.3</version>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

② 下载UEditor的jsp版本

UEditor官网：https://ueditor.baidu.com/website/index.html

下载地址：https://ueditor.baidu.com/website/download.html

从官网或者其他地方下载下来，然后放入如下路径 /static/common/plugs/ueditor：

当然可以选择其他路径，这里以这个路径为参考。如果你放到其他地方，那么本文描述的其他细节请自行对应修改。

② 修改\static\common\plugs\ueditor\ueditor.config.js

③ 自定义UeditorController

稍微解释下，这里controller拦截的请求/common/plugs/ueditor/jsp/controller其实就是②中ueditor.config.js的serverUrl。

@Controller
@RequestMapping("/common/plugs/ueditor/jsp")
public class UeditorController {
    @RequestMapping("/controller")
    @ResponseBody
    public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
        System.out.println("rootPath:" + rootPath);
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println("exec:" + exec);
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

为什么要这么做呢？跟踪其源码可以发现它是根据this.rootPath, this.contextPath, configPath获取配置管理器的—对应config.json。

如果遇到诸如：配置文件初始化失败错误就是config.json拿不到！

com.baidu.ueditor.ActionEnter:

 public ActionEnter(IStorageManager storage, HttpServletRequest request, String rootPath, String configPath) {
        this.request = null;
        this.rootPath = null;
        this.contextPath = null;
        this.actionType = null;
        this.configManager = null;
        this.storage = storage;
        this.request = request;
        this.rootPath = rootPath;
        this.actionType = request.getParameter("action");
        this.contextPath = request.getContextPath();
        if (configPath == null) {
            configPath = request.getParameter("configPath");
            if (configPath == null) {
                configPath = request.getRequestURI();
            }
        }

        this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, configPath);
    }

也就是说，如果你参数中没有传configPath，那么它将自动获取request.getRequestURI();–在这里也就是/common/plugs/ueditor/jsp/controller。继续再跟下ConfigManager.getInstance源码如下：

 private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException {
        rootPath = rootPath.replace("\\", "/");
        this.rootPath = rootPath;
        if (contextPath.length() > 0 && uri.startsWith(contextPath)) {
            this.originalPath = this.rootPath + uri.substring(contextPath.length());
        } else {
            this.originalPath = this.rootPath + uri;
        }
        this.initEnv();
    }

这里也就明朗了，UEditor就是根据originalPath获取到config.json！如果拿不到这玩意，就会报配置错误！

所以其实这中间可操作的地方还有，可以在controller方法中放入configPath！

完成后界面如下：

上传的图片为止如下图所示：

此部分相关代码下载地址：SpringBoot+thymeleaf+UEditor+不修改上传路径.zip

---

【2】项目打jar部署到服务器

① config.json读取问题

按照【1】配置，这时拿不到config.json。

修改controller如下：

/**
 * 这里contextPath为空！
 */
@Controller
@RequestMapping("/common/plugs/ueditor/jsp")
public class UeditorController {

    private static  final Logger logger= LoggerFactory.getLogger(UeditorController.class);
    @Value("${com.jane.configjson.baseFilePath}")
    private String configJsonPath;

    @RequestMapping("/controller")
    @ResponseBody
    public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        logger.debug("配置文件配置的configJsonPath："+configJsonPath);
        String requestURL = request.getRequestURL().toString();
        logger.debug("requestURL:"+requestURL);
        logger.debug("RequestURI:"+request.getRequestURI());
        logger.debug("ContextPath:"+request.getContextPath());
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
        String configPath=request.getRequestURI();
        if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){
            logger.debug("本地环境");
        }else{
            rootPath=configJsonPath;
            configPath="/test";//这里随便写
            logger.debug("服务器环境，请将config.json放到"+rootPath+"的下面！");
        }
        logger.debug("rootPath:" + rootPath);
        /**
         * 1.如果ContextPath为空，则rootPath+RequestURI的父级决定config.json位置
         * 2.如果ContextPath为空不为空 originalPath = this.rootPath + uri.substring(contextPath.length());
         * originalPath.getParentFile()+config.json即为最终完整config.json路径
         */
        try {
            String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();
            System.out.println("exec:" + exec);
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

然后将config.json放到配置文件中${com.jane.configjson.baseFilePath}的下面：

这个路径就是项目跑的路径：

但是此时还有另外一个问题，图片不能回显！

---

② 解决图片回显问题

图片上传成功，但是回显不了！

那么这时候就要搞清楚，图片到底保存到了哪里？

继续跟踪源码，图示如下：

很明显了，图片最终路径是rootPath+savePath!rootPath就是我们在controller传进去的，savePath就是UEditor从config.json读取imagePathFormat的值！

服务器验证如下：

而图片回显请求则是savePath+实际保存的文件名！那么很好说了,自定义controller拦截/ueditor/jsp/upload前缀的请求进行文件下载处理即可！

第一步-修改UeditorController

exec方法执行结束后是返回一个json字符串，那么就可以从中对url进行替换。

 String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();
            /**
             * exec:{"state": "SUCCESS","original": "\u5b9e\u9a8c\u75301.jpg","size": "42389","title": "1580809982781059908.jpg",
             * "type": ".jpg","url": "/ueditor/jsp/upload/image/20200204/1580809982781059908.jpg"}
             */
            System.out.println("exec:" + exec);
            JSONObject parse = JSON.parseObject(exec);
            if(parse.containsKey("url")){
                String oldUrl = parse.getString("url");
                String urlNew="/ueditor/jsp/upload?filePath="+oldUrl;
                parse.put("url",urlNew);
                logger.debug("封装后的exec:"+parse);
            }

第二步-自定义fileController处理上面的urlNew

	@Value("${com.jane.configjson.baseFilePath}")
    private String configJsonPath;
    
	@RequestMapping("/ueditor/jsp/upload")
    public ResponseEntity<byte[]> ueditorfileDown(HttpServletRequest request,String filePath){
        logger.debug("filePath:"+filePath);
        byte [] body = null;
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
        String requestURL = request.getRequestURL().toString();
        if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){
            logger.debug("本地环境");
        }else{
            rootPath=configJsonPath;
        }
        String fileUrl=rootPath+ File.separator+filePath;
        try {
            //获取到文件流
            InputStream in = new FileSystemResource(fileUrl).getInputStream();
            body = new byte[in.available()];
            in.read(body);
        } catch (IOException e1) {
            logger.debug("文件读入出错，文件路径为："+fileUrl);
            e1.printStackTrace();
        }
        int index = filePath.lastIndexOf("/");
        String fileName = filePath.substring(index+1);
        logger.debug("本次下载的文件为："+fileName);
        //添加响应头
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", "attachment;filename="+fileName);
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        HttpStatus statusCode = HttpStatus.OK;
        ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(body, headers, statusCode);
        return response;
    }

最终效果如下图所示：

---

【3】指定文件上传路径与回显

其实，只要【2】弄清楚了，指定文件上传路径并回显就很简单了。核心要点：rootPath,configPath,savePath以及config.json配置内容！

这里不再赘述！