SpringBoot下thymeleaf使用UEditor万字总结！ |
您所在的位置：网站首页 › dll程序怎么安装 › SpringBoot下thymeleaf使用UEditor万字总结！ |
SpringBoot下thymeleaf使用UEditor万字总结！
|
以前传统web工程下使用UEditor是继承ActionEnter实现自己的MyActionEnter来实现自定义文件上传路径的，具体可以参考：UEditor自定义图片/文件上传路径与回显 本文主要是SpringBoot+thymeleaf环境下使用UEditor。 【1】本地环境下不指定上传路径① 引入pom依赖 com.gitee.qdbp.thirdparty ueditor 1.4.3.3 org.springframework.boot spring-boot-starter-thymeleaf② 下载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 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 response = new ResponseEntity(body, headers, statusCode); return response; }最终效果如下图所示：  【3】指定文件上传路径与回显其实，只要【2】弄清楚了，指定文件上传路径并回显就很简单了。核心要点：rootPath,configPath,savePath以及config.json配置内容！ 这里不再赘述！ 作者： 流烟默链接：https://janus.blog.csdn.net/article/details/104169808来源：csdn最后，照旧安利一波我们的公众号：「终端研发部」，目前每天都会推荐一篇优质的技术相关的文章，主要分享java相关的技术与面试技巧，我们的目标是： 知道是什么，为什么，打好基础，做好每一点!这个主创技术公众号超级值得大家关注。 |
【本文地址】