http://kindeditor.org/
確定下有沒有查找替換功能
http://pandao.github.io/editor.md/
http://pandao.github.io/editor.md/examples/html-preview-markdown-to-html.html
https://github.com/helloworldtang/spring-boot-rte-study
一、Markdown和editor.md簡介：
Markdown在技術圈里（估計更多是程序猿吧）越來越流行。簡單的語法，統一的格式，使用過程中，手基本上不用從鍵盤上移到鼠標上去，超級方便。寫好了一篇md文檔(也就是含Markdown語法格式的普通TXT文件)，可以隨意放到別的支持Markdown格式的網站上發布。
editor.md是國內開源的一款在線Markdown編輯器，單純基於前端JavaScript實現，和后端什么語言無關。這個還可以畫流程圖，以及數學公式。官網Demo示例使用的是PHP語言，我后端使用的是Java，Springmvc。
如下記錄我在個人開源項目17Smart中使用的方法和過程。17Smart源碼目前托管在Github上，感興趣的可以參考了解。
二、editor.md的使用：
2.1、下載：
我們可以從其官網中找到下載最新版V1.5.0，解壓資源包如下圖：
http://pandao.github.io/editor.md/examples/index.html
The open source embeddable online markdown editor (component). https://pandao.github.io/editor.md/
- >1.examples文件中是使用PHP做的所有示例(可以在文檔編輯器里打開，並查看源代碼)；
- >2.lib中是editor.md所依賴的第三方js資源；
- >3.plugins中是如emoji表情支持、代碼格式化等插件；
注意事項1：
需要注意的是，LEGACYHTML5需要搭配一個額外的庫NekoHTML才可用。到項目根目錄的build.gradle文件里這樣添加它到dependencies
具體內容如下：
非嚴格的thymeleaf格式
你可能會發現在默認配置下，thymeleaf對.html的內容要求很嚴格，比如<meta charset="UTF-8" />，如果少最后的標簽封閉符號/，就會報錯而轉到錯誤頁。也比如你在使用Vue.js這樣的庫，然后有<div v-cloak></div>這樣的html代碼，也會被thymeleaf認為不符合要求而拋出錯誤。
因此，建議增加下面這段：
spring.thymeleaf.mode = LEGACYHTML5
spring.thymeleaf.mode的默認值是HTML5，其實是一個很嚴格的檢查，改為LEGACYHTML5可以得到一個可能更友好親切的格式要求。
需要注意的是，LEGACYHTML5需要搭配一個額外的庫NekoHTML才可用。到項目根目錄的build.gradle文件里這樣添加它到dependencies：
compile('net.sourceforge.nekohtml:nekohtml:1.9.22')
然后運行一次Gradle刷新（有任何Gradle改動，都應該這樣運行一次）：
Gradle刷新
最后重啟項目就可以感受到不那么嚴格的thymeleaf了。
參考
http://acgtofe.com/posts/2016...
https://segmentfault.com/q/1010000008308601/a-1020000008308882
基於spring boot的示例代碼2：
https://github.com/wchstrife/blog 配套的文章：http://blog.csdn.net/wchstrife/article/details/76725317
Editor.md和markdown實現Sg一樣的截圖粘貼上傳https://segmentfault.com/a/1190000010776967
另一個Markdown的博客：
使用SpringBoot快速搭建個人博客https://zhuanlan.zhihu.com/p/28428463
另一個基於markdown的code:https://github.com/mrdear/MarkdownViewTools
采用自身模塊規范編寫的前端UI框架，遵循原生HTML/CSS/JS的書寫形式，極低門檻，拿來即用。 http://www.layui.com http://www.layui.com/doc/base/infrastructure.html
SpringBoot項目實戰(一)--Markdown展示工具http://dev.dafan.info/detail/209683?p=54-68
need to do ：https://github.com/jetaggart/spring-boot-markdown
need to do:好像很有趣的代碼，Kotlin 使用 Spring WebFlux 實現響應式編程： https://github.com/EasyKotlin/kotlin-with-webflux
need to do:一個小博客https://github.com/OverrideRe/MyBlog
需要鑒別下，下面這篇文章是否有效
https://course.tianmaying.com/web-development+markdown#0
博客是要顯示在HTML之中的，大多博客網站都會提供HTML編輯器，這樣的編輯器通常會包含一組格式按鈕、一系列快捷鍵和一個輸入框。然而，HTML編輯器難以精確地編寫文檔，同時可視化的編輯產生大量冗余的標簽和屬性（這也是dreamweaver逐漸淡出開發者圈子的原因之一）。我們可以使用更高端的方式編輯HTML文檔：使用Markdown。
Markdown 是一種輕量級標記語言。通過markdown，可以使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的HTML文檔。類似在電子郵件中通過某些純文本標記生成HTML片段。如果你還不確定Markdown是什么東西，請打開 markdown-live-preview 來馬上體驗一下！Markdown語法細節可以查看： http://wowubuntu.com/markdown/
另一個markdown開源庫https://github.com/sirthias/pegdown
富文本編輯器https://dev.ckeditor.com/
這個代碼沒有深入分析過https://github.com/jetaggart/spring-boot-markdown
開源博客系統 - 分享（這個沒有測試，need to do） https://juejin.im/entry/5934cdefac502e0068ab9727
2.2、簡單使用：
將上面的解壓的editormd資源文件拷貝（選取需要的）到我們的項目適合目錄下面。
2.2.1、在自己的頁面上引入相關的css和js，代碼如下：
<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" /> <script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script> <script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
2.2.2、在自己的頁面中加上DIV：
DIV的id為my-editormd（這個div在form表單中）。DIV中包含二個textarea，其實官方demo中只有一個，第二個是否方便我們POST提交時，后端可以獲取到md文檔內容，如java中request.getParameter("my-editormd-html-code")。
<div id="my-editormd" > <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea> <!-- 注意：name屬性的值--> <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea> </div>
這里值得注意兩點：
- >1.后端要想獲得第二個textarea中的值，首先需要打開editor.md的
saveHTMLToTextarea : true設置（見下面）； - >2.textarea中name屬性值，應該跟着div的ID
my-editormd值來定，即$-html-code（剛開始，后端死活獲取不到值，翻看了源碼才知道）
2.2.3、在同頁面中再加上如下JS代碼：
<script type="text/javascript"> $(function() { editormd("my-editormd", {//注意1：這里的就是上面的DIV的id屬性值 width : "90%", height : 640, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路徑 saveHTMLToTextarea : true//注意3：這個配置，方便post提交表單 }); }); </script>
這里值得注意三點：
- >1.注意1：這里的就是上面的DIV的id屬性值；
- >2.注意2：你的path路徑（原資源文件中lib包在我們項目中所放的位置）；
- >3.注意3：saveHTMLToTextarea 設置true或false關乎后端是否可以獲取到值；
這樣我們就完成了一個最簡單的editor.md的編輯器了，我們可以在這里面書寫自己熟悉的Markdown文檔，包括代碼，右側有實時預覽。
2.3、上傳圖片：
上面最簡單的editor.md的編輯器，目前還是不可以上傳圖片的。我們需要略作配置修改，還是很簡單的。
我們都知道在編寫Markdown文檔時，圖片語法是。可是，往往我們需要上傳本地圖片。在上面的基礎之上，略做如下修改即可（當然后端的代碼得自己寫）：
<script type="text/javascript"> $(function() { editormd("my-editormd", {//注意1：這里的就是上面的DIV的id屬性值 width : "90%", height : 640, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路徑 saveHTMLToTextarea : true,//注意3：這個配置，方便post提交表單 /**上傳圖片相關配置如下*/ imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/smart-api/upload/editormdPic/",//注意你后端的上傳圖片服務地址 }); }); </script>
注意：editor.md期望你上傳圖片的服務返回如下json格式的內容
{
success : 0 | 1, //0表示上傳失敗;1表示上傳成功
message : "提示的信息",
url : "圖片地址" //上傳成功時才返回
}
我的后台使用的是springmvc，代碼如下:
（注意：@RequestParam(value = "editormd-image-file", required = true注解） //參數名不能改
@RequestMapping("editormdPic")
@ResponseBody
public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception{
String trueFileName = file.getOriginalFilename();
String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
String fileName = System.currentTimeMillis()+"_"+CommonUtils.getRandomNumber(100, 999)+suffix;
String path = request.getSession().getServletContext().getRealPath("/assets/msg/upload/");
System.out.println(path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//保存
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
JSONObject res = new JSONObject();
res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName);
res.put("success", 1);
res.put("message", "upload success!");
return res;
}
2.4、Markdown文檔頁面展示：
上面我們通過post提交，后端獲取到MD文檔內容后，往往存在數據庫中，然后在頁面展示時，我們需要把MD語法文檔，轉換為HTML語法（也可以先轉換為標准的HTML存儲，但我覺得先轉換的話，會占用較多存儲空間）。
首先引入必要JS（下面不是所有必要）：
<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script> <script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
然后，本頁面中，加入如下DIV：
<div id="doc-content"> <textarea style="display:none;">${message.detail }</textarea> </div>
最后，再引入如下JS代碼：
<script type="text/javascript"> var testEditor; $(function () { testEditor = editormd.markdownToHTML("doc-content", {//注意：這里是上面DIV的id htmlDecode: "style,script,iframe", emoji: true, taskList: true, tex: true, // 默認不解析 flowChart: true, // 默認不解析 sequenceDiagram: true, // 默認不解析 codeFold: true, });}); </script>
三、editor.md的更多配置項：
這配置，可以根據官方提供的Demo和源碼找到（editor.md-master/examples目錄下面）。如，主題顏色設置；上傳圖片后的特殊處理等。
<script type="text/javascript"> var myEditor; $(function() { myEditor = editormd("my-editormd", { width : "90%", height : 800, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/", saveHTMLToTextarea : true, emoji: true,//emoji表情，默認關閉 taskList: true, tocm: true, // Using [TOCM] tex: true,// 開啟科學公式TeX語言支持，默認關閉 flowChart: true,//開啟流程圖支持，默認關閉 sequenceDiagram: true,//開啟時序/序列圖支持，默認關閉, dialogLockScreen : false,//設置彈出層對話框不鎖屏，全局通用，默認為true dialogShowMask : false,//設置彈出層對話框顯示透明遮罩層，全局通用，默認為true dialogDraggable : false,//設置彈出層對話框不可拖動，全局通用，默認為true dialogMaskOpacity : 0.4, //設置透明遮罩層的透明度，全局通用，默認值為0.1 dialogMaskBgColor : "#000",//設置透明遮罩層的背景顏色，全局通用，默認為#fff codeFold: true, imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/smart-api/upload/editormdPic/", /*上傳圖片成功后可以做一些自己的處理*/ onload: function () { //console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.width("100%"); //this.height(480); //this.resize("100%", 640); }, /**設置主題顏色*/ editorTheme: "pastel-on-dark", theme: "gray", previewTheme: "dark" }); }); </script>
四、網站&源碼：
- 網站：17Smart
- 源碼：Github
- eBook：《深入剖析Tomcat》
http://blog.csdn.net/lovejavaydj/article/details/73692917