Springboot整合百度Ueditor富文本编辑器[Eclipse 版]

Part 1:下载富文本编辑器源码及JSP代码

官网下载传送门:UEditor下载链接

下载版本如图所示:

---

Part 2:搭建运行环境

1. 将源码文件夹中这个文件夹放入\src\main\java\com\下
   

2. 将jsp文件下这些东西放入\src\main\resources\static下
   

3. 配置资源文件路径[1.5版本springboot可以不配]

   @Configuration
   public class WebMvcAdapterConfig extends WebMvcConfigurationSupport{
   
       @Override
       protected void addResourceHandlers(ResourceHandlerRegistry registry) {
           // TODO Auto-generated method stub
           registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
           registry.addResourceHandler("/path/**").addResourceLocations("file:/C:/upload/img/");
           super.addResourceHandlers(registry);
       }
   
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           // TODO Auto-generated method stub
           registry.addViewController("/index.html").setViewName("index");
           super.addViewControllers(registry);
       }
   }

4. 添加依赖包
   

5. 修改index.html js引用路径,根据4中配置决定
   

6. 启动项目,如果访问页面看到下图,代表配置初步成功,已经可以使用基本功能[我的工具栏自定义过,所以会比正常的少一些控件]
   

---

Part 3:上传图片功能配置

1. 完成Part 2配置后,点击图片上传功能,发现不可用,提示后台配置没有正常加载

2. 将jsp文件夹下的config.json文件放入\src\main\resources\下
   

3. 依据源码里的controller.jsp，写一个映射路径为config的控制层方法

       /**
        * 百度富文本编辑器
        * @param request
        * @param response
        */
       @RequestMapping(value="/config")  
       public void config(HttpServletRequest request, HttpServletResponse response) {  
           response.setContentType("application/json");  
           String rootPath = request.getSession().getServletContext().getRealPath("/");  
           try {  
               String exec = new ActionEnter(request, rootPath).exec();  
               PrintWriter writer = response.getWriter();  
               writer.write(exec);  
               writer.flush();  
               writer.close();  
           } catch (JSONException e) {  
               e.printStackTrace();  
           } catch (IOException e) {
               // TODO Auto-generated catch block
               e.printStackTrace();
           }  
       } 

4. 修改ConfigManage类的getConfigPath()方法

   private String getConfigPath () {
           try{
               //获取classpath下的config.json路径
               return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
           }catch (URISyntaxException e){
               return null;
           }
   
       }

5. 配置ueditor.config.js
   

6. 运行项目路径http://localhost:8080/config?action=config，如下图显示则表示可读取到config.json文件[我这是自动转换json格式插件,正常情况配置文件内容输出出来就可以了]
   

7. 修改BinaryUploader 类，解决其无法获得带字节流的request的问题

   public class BinaryUploader {
   
       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 {  
               // FileItemIterator iterator = upload.getItemIterator(request);  
               //  
               // while (iterator.hasNext()) {  
               //  fileStream = iterator.next();  
               //  
               //  if (!fileStream.isFormField())  
               //      break;  
               //  fileStream = null;  
               // }  
               //  
               // if (fileStream == null) {  
               //  return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  
               // }  
               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 physicalPath = (String) conf.get("rootPath") + savePath;
   
               //InputStream is = fileStream.openStream();  
               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 (FileUploadException e) {  
           //  return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);  
           } catch (IOException e) {  
           }  
           return new BaseState(false, AppInfo.IO_ERROR);  
       }
   
   
   
       private static boolean validType(String type, String[] allowTypes) {
           List list = Arrays.asList(allowTypes);
   
           return list.contains(type);
       }
   }

---

Part 4:配置图片上传路径

1. 打开config.json文件配置上传路径[图片回显路径是映射图片上传路径的,一般在Part 2 第3步实现]
   

2. 打开ConfigManager.java,在getConfig方法中修改

   conf.put( "basePath", this.jsonConfig.getString("basePath") );
   conf.put( "savePath", savePath );
   conf.put( "rootPath", this.rootPath );

3. 打开BinaryUploader.java,在save方法中修改

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

4. 打开application.properties新增

   web.upload-path=C:/  
   spring.mvc.static-path-pattern=/**  
   spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}