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官方文檔