Java+UEditor

1. 首先到UEditor官网下载JSP版本的压缩包，目前是停留在了1.4.3.3版本。

2. 下载完成后解压缩，把ueditor目录放到项目中，例如放到webapp目录下的/static/ueditor，注意要配置静态资源访问路径，保证能够正常访问到里面的文件，例如http://localhost/static/ueditor/ueditor.config.js。

3. HTML中在目标位置放上UEditor的容器，此处使用script：

   <!-- UEditor编辑器 -->
   <script id="ueditor" name="introduction" type="text/plain"></script>
   

4. 引用UEditor的配置及源码文件，并进行初始化（此处结合了Thymeleaf，可以根据实际情况进行修改）：

   <!-- UEditor配置文件 -->
   <script type="text/javascript" th:src="@{/static/ueditor/ueditor.config.js}"></script>
   <!-- UEditor源码文件 -->
   <script type="text/javascript" th:src="@{/static/ueditor/ueditor.all.js}"></script>
   <script th:inline="javascript">
       $(document).ready(function () {
           // 初始化UEditor
           var ue = UE.getEditor('ueditor');
           // 初始化成功后，如果已有内容则进行设置
           ue.ready(function () {
               //设置编辑器的内容
               ue.setContent([[${book?.introduction}]]);
           });
       })
   </script>
   

自定义图片上传

UEditor的图片上传会经过两个步骤：

1. 首先初始化UEditor时会先使用GET方法调用指定接口，携带参数action=config，需要服务器能够返回配置文件ueditor目录/jsp/config.json，如果访问不到是无法进行图片上传的。
2. 上传图片时，会使用POST方法调用同个接口，携带参数action=指定值，接收到指定格式的回调才能正常在编辑器中显示上传的图片。

访问配置文件和上传图片的接口配置在ueditor.config.js中的serverUrl变量，可以设置为：

window.UEDITOR_CONFIG = {
    // 服务器统一请求接口路径
    serverUrl: "/upload"
    // ...
}

ueditor目录/jsp/config.json的关键配置如下：

{
    "imageActionName": "upload", /* 上传图片的action参数的值，即action=xxx */
    "imageFieldName": "file", /* 提交的图片在表单中的字段名 */
}

Controller层可以处理如下：

@Controller
public class UploadController {
	@GetMapping("/upload")
	public String upload(@RequestParam(required = false) String action) {
		return "redirect:/static/ueditor/jsp/config.json";
	}

	@PostMapping("/upload")
	@ResponseBody
	public UEditorResult upload(@RequestParam(required = false) String action, MultipartFile file, HttpServletRequest request) {
		if (file == null || file.getSize() <= 0) {
			final UEditorResult uEditorResult = new UEditorResult();
			uEditorResult.setState("error");
			return uEditorResult;
		}
		// 进行图片上传，注意要返回UEditorResult
		return UploadUtil.uploadFile(request, file);
	}
}

此处的UEditorResult为自己封装的类，包含UEditor需要的返回字段，官方规范返回格式为：

{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

注意：SUCCESS必须大写才能被识别为成功，否则就会被识别为失败，无法显示上传的图片。

自己封装的UEditorResult如下：

public class UEditorResult {
	/**
	 * 上传结果
	 */
	private String state;
	/**
	 * 原图名称
	 */
	private String original;
	/**
	 * 保存名称
	 */
	private String title;
	/**
	 * 文件路径
	 */
	private String url;
}

参考：UEditor官方文档