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, "/" );
	}