Echo 是如何支持 MarkDown 的
這個點其實沒啥技術(shù)含量，就是集成一下開源的 MarkDown 編輯器，按照說明按部就班地走就行了。
這里我選的 MarkDown 編輯器是 Editor.md。大家可能會碰壁的地方應(yīng)該就是圖片上傳的部分。
第一步：下載 Editor.md 源碼
Editor.md 源碼下載地址：https://pandao.github.io/editor.md/index.html
下載解壓之后將文件夾整個放入 static 目錄下：
做完這一步各位的第一想法應(yīng)該就是要去配置下我們的攔截器（對除靜態(tài)資源外所有路徑進行攔截），不要攔截 editor-md 這個文件夾下的所有資源。
另外，editor.md 自帶的 examples 文件夾下的 example.html 文件就是一個示例界面，我們直接將其拷貝到 templates/site 目錄下，并重命名為 discuss-publish.html，作為我們的發(fā)帖界面。然后將里面所有的靜態(tài)資源引用都改成這些引用的絕對路徑，比如：
第二步：修改 discuss-publish.html 代碼
下面貼一下核心的前端代碼：
MarkDown 文本的渲染區(qū)域就是 textarea 標簽包裹的那個區(qū)域
下圖中框出來的地方填的就是包裹 textarea 的 div 的 id：
另外，需要注意的是 path 路徑的配置（lib 文件夾的路徑）以及 imageUploadURL（后端上傳圖片的方法地址），這個在上圖中都用黃線標注出來了。
第三步：編寫后端上傳圖片代碼
關(guān)于上傳圖片這里，我就沒有做圖床服務(wù)器這種了，直接把圖片上傳到本地了。
編寫后端之前首先要做的就是與前端協(xié)調(diào)好接口格式，那 editor.md 官方說期望我們上傳圖片的服務(wù)返回如下 JSON 格式：
{
success : 0 | 1, // 0 表示上傳失敗; 1 表示上傳成功
message : "提示的信息",
url : "圖片地址" //上傳成功時才返回
}
另外，editor.md 中選擇圖片的控件 id 默認是 editormd-image-file
下面這段上傳圖片的代碼在 DiscussPostController.java 中：
圖片上傳路徑 editormdUploadPath 定義在配置文件中（這里如果各位小伙伴需要將項目部署到服務(wù)器上，需要將本地路徑修改為線上路徑）：
圖片上傳四步走：
① 獲取上傳文件的名稱 ② 生成圖片存儲路徑 ③ 保存圖片到存儲路徑 ④ 生成圖片訪問地址
第四步：配置虛擬路徑映射訪問
不知道各位會不會遇到這樣的問題，這主要是 IDEA 對服務(wù)器的保護措施導(dǎo)致的：SpringBoot 中上傳圖片到當前目錄下，不能立即顯示，需要重啟服務(wù)器才會顯示上傳的圖片。服務(wù)器不能對外部暴露真實的資源路徑，需要配置虛擬路徑映射訪問。
在我們的 WebMvcConfig.java 中添加如下方法，對圖片上傳的文件夾 editor-md-upload 配置虛擬路徑映射訪問：
第五步：解決跨域問題
上述步驟做完后，可能會遇到報錯跨域問題，需要在 Security 配置中增加一行配置：
http.headers().frameOptions().sameOrigin();
第六步：配置 MarkDown 渲染
至此，我們做完了寫 MarkDown 的工作，接下來做的就是將 MarkDown 渲染成 Html 顯示在頁面上。
我們需要在帖子詳情頁 dicuss-detail.html 中做一些修改。
引入 editor.md 的 css 和必要的 js 文件：
可以看見，上面配置了一些 MarkDown 渲染規(guī)則，圖中標注出來的 md-content 就表示要渲染的區(qū)域，即包裹帖子內(nèi)容的 div 的 id:
