springboot Thymeleaf整合UEditor

1.下载UEditor

手册地址：​​​http://fex.baidu.com/ueditor/​​​

下载地址： ​​​https://github.com/fex-team/ueditor/releases​​​ ，将最新版本1.4.3.3的完整源码和Jsp版本UTF-8版本下载下来并解压。

2.配置pom.xml

项目中配置UEditor的源码需要的jar包

<dependency>
  <groupId>org.json</groupId>
  <artifactId>json</artifactId>
  <version>20180813</version>
</dependency>
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>
<dependency>
  <groupId>commons-codec</groupId>
  <artifactId>commons-codec</artifactId>
  <version>1.11</version>
</dependency>

3.导入UEditor源码及资源文件

将解压的utf8-jsp版本目录下的除jsp目录和index.html文件，其余文件全部导入到resources/static目录下manage/ueditor文件夹中

4.根目录下jsp目录中的config.json拷贝到resources根路径下。

5.配置JS包

<script src="/manage/ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<script src="/manage/ueditor/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/manage/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript" charset="utf-8"></script>

6.引用页面如下

<textarea id="detail" name="detail" th:text="${model.detail}"  style="height:500px;"></textarea>
<script type="text/javascript">
    $(function () {
        var ue = UE.getEditor('detail');
    });
</script>

######整合后端代码######

1.将解压的完整源码包下的jsp->src目录下的源码拷贝到项目对应包目录下

2，完整源码包下的jsp文件夹中config.json放入如下路径

3，ConfigManager配置

更改configFileName 为上面config.json路径

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

更改getConfigPath

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

4，配置application.properties

#UEditor上传路径地址（注意Linux和Windows上的目录结构不同）
#file.uploadFolder=/home/upload/
web.upload-path=D:/Project/sanwu/
spring.mvc.static-path-pattern=/**
spring.web.resources.static-locations=file:${web.upload-path},classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

5，编写controller类

@Controller
@RequestMapping("/ueditor")
public class UEditorController {

    //注入application.properties里面的配置web.upload-path
    @Value("${web.upload-path}")
    private String uploadPath;


    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = uploadPath;
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

6，修改ueditor.config.js对应上面controller地址

, serverUrl: window.CTX + "/ueditor/config"

7，引入页面加入window.CTX

<script type="text/javascript">
    var ctxPath= "[[${#httpServletRequest.getContextPath()}]]";
    window.CTX = ctxPath;
</script>
<script src="/manage/ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<script src="/manage/ueditor/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/manage/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript" charset="utf-8"></script>

8，修改BinaryUploader

替换如下代码

public class BinaryUploader {

  public static final State save(HttpServletRequest request,
                   Map<String, Object> conf) {
    if (!ServletFileUpload.isMultipartContent(request)) {
      return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
    }
    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 = 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 = 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);
  }

  private static boolean validType(String type, String[] allowTypes) {
    List<String> list = Arrays.asList(allowTypes);

    return list.contains(type);
  }

}

9，修改路径config.json

批量替换ueditor/jsp/缩短路径

10，修改FileManager的getPath，修复在线管理

private String getPath ( File file ) {
//    String path = file.getAbsolutePath();
//    return path.replace( this.rootPath, "/" );
    String path = PathFormat.format(file.getAbsolutePath());
    return path.replace(this.rootPath, "/" );
  }