一、editor.md簡介
editor.md是國內開源的一款在線Markdown編輯器，單純基于前端JavaScript實現，和后端什么語言無關。我后端用的Java，在前臺JSP中引入資源時用的spring標簽。可從官網進行下載，下載后文件結構如圖：
structure.jpg
二、使用
參照了兩篇博文：
- Markdown編輯器editor.md的使用
-
使用并改造editor.md在JAVA-WEB項目中實現Markdown編輯器
并參照下載后example文件夾下的simple.html代碼就可以對大致使用有所了解
三、SSM博客中的使用：
- 寫的博客主要在能夠支持標準Markdown語法的條件下支持上傳圖片和代碼顯示，因此在項目中主要使用到了如下的文件，其中js文件夾中包含了editormd.min.js和jquery.min.js
structure2.jpg
- 引入
<link rel="stylesheet" href="<spring:url value="/resource/css/editormd.min.css"/>" />
<script src="<spring:url value="/resource/js/jquery.min.js"/>"></script>
<script src="<spring:url value="/resource/js/editormd.min.js"/>"></script>
<script type="text/javascript">
$(function() {
editormd("my-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "<spring:url value="/resource/lib/"/>", (自己工程的lib地址)
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "<spring:url value="/uploadFile"/>", (處理圖片上傳的url)
saveHTMLToTextarea : true
});
});
</script>
- 在HTML中寫一個div節點,包含兩個textarea，格式如下：
<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>
- Markdown文檔頁面展示：
- 引入
<link rel="stylesheet" href="<spring:url value="/resource/css/editormd.min.css"/>" />
<link rel="stylesheet" href="<spring:url value="/resource/css/editormd.preview.min.css"/>" />
<script src="<spring:url value="/resource/js/jquery.min.js"/>"></script>
<script src="<spring:url value="/resource/lib/marked.min.js"/>"></script>
<script src="<spring:url value="/resource/lib/prettify.min.js"/>"></script>
<script src="<spring:url value="/resource/js/editormd.min.js"/>"></script>
- JavaScript代碼
<script type="text/javascript">
$(function(){
editormd.markdownToHTML("content") ("content"為包裹顯示內容的div的id值如下)
});
</script>
<div id="content" class="mdl-cell mdl-card mdl-cell--12-col mdl-shadow--2dp content editormd-preview-theme-dark">
<textarea style="display:none;" name="editormd-markdown-doc">${article.body}</textarea>
</div>
(注意：<textarea>)標簽內的name=""editormd-markdown-doc"值得設定一定別忘了，在之前的博客中沒有寫清楚這一點，導致調了半天才發現。
