整合一個編輯器，其實很簡單。首先找到他的源碼，以editor.md 爲例：Editor官方文檔
這裏我寫了一個小demo，可以下載參考：SpringBoot整合editor.md小案例下載
將下載好的壓縮包解壓好，目錄如下：
自己創建一個SpringBoot項目，創建一個空白的頁面。將解壓後的index.jsp文件中的相關內容拷貝到我們的頁面中。
我的頁面如下：
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>MarkDown編輯器</title>
<link th:href="@{/editor/css/style.css}" rel="stylesheet"/>
<link th:href="@{/editor/css/editormd.css}" rel="stylesheet"/>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="layout">
<header>
<h1>MarkDown編輯器</h1>
</header>
<form action="markdownTest" method="post">
<div id="test-editormd">
<textarea style="display:none;" name="markdownContent"></textarea>
</div>
<button type="submit" class="btn btn-info col-md-offset-3 col-md-6">添加</button>
</form>
</div>
<script th:src="@{/editor/js/jquery.min.js}"></script>
<script th:src="@{/editor/js/editormd.min.js}"></script>
<script th:src="@{/editor/lib/marked.min.js}"></script>
<script th:src="@{/editor/lib/prettify.min.js}"></script>
<script th:src="@{/editor/lib/raphael.min.js}"></script>
<script th:src="@{/editor/lib/underscore.min.js}"></script>
<script th:src="@{/editor/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editor/lib/flowchart.min.js}"></script>
<script th:src="@{/editor/lib/jquery.flowchart.min.js}"></script>
<script src="js/editormd.js"></script>
<script th:src="@{/editor/js/editormd.js}"></script>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "lib/",
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/editor/imageUpload",
});
});
</script>
</body>
</html>
注意：將下載後解壓完成的項目，static目錄下所有文件拷貝到我們新建項目的靜態資源目錄下，然後更改頁面中css，js的路徑。不然會造成頁面的報錯，文檔編輯器不能正常使用
注意：雖然目錄中有些文件我們在頁面中沒引用到，如plugins目錄下文件等，但是我們必須將文件一起賦值過來，不然在頁面引用到的相關js中會有報錯。
啓動項目，打開我們的頁面。效果如下：
測試圖片上傳功能：
上傳後臺接受代碼：
@RequestMapping("imageUpload")
public void imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file,
HttpServletRequest request, HttpServletResponse response){
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter wirte = null;
JSONObject json = new JSONObject();
try {
wirte = response.getWriter();
//文件存放的路徑
String path = request.getSession().getServletContext().getRealPath("upload");
String url = "http://localhost:8888"
+ request.getContextPath()
+ "//upload//"
+ FileUpload.upload(request, file, path);
json.put("success", 1);
json.put("message", "hello");
json.put("url", url);
} catch (Exception e) {
}finally{
wirte.print(json);
wirte.flush();
wirte.close();
}
System.out.println("imageUpload");
}
FileUpload文件處理類：
public class FileUpload {
/*
*圖片上傳工具類
*/
public static String upload(HttpServletRequest request, MultipartFile file, String path) {
String fileName = file.getOriginalFilename();
fileName = UUID.randomUUID() + fileName.substring(fileName.indexOf("."), fileName.length());
File targetFile = new File(path, fileName);
//保存
try {
// 判斷父級目錄師父存在
if (!targetFile.getParentFile().exists()) {
targetFile.getParentFile().mkdirs();//創建父級文件路徑
targetFile.createNewFile();//創建文件
}
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
return fileName;
}
}
最後將頁面中圖片上傳的接口路徑更改爲我們後臺編寫好的：
$(function () {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "lib/",
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/editor/imageUpload",
});
});
配置好後重新啓動項目，進入頁面中：
本地上傳好我們的圖片，點擊確定即可：
