一、editor.md簡介
editor.md是國內(nèi)開源的一款在線Markdown編輯器颤专，單純基于前端JavaScript實(shí)現(xiàn)纽哥，和后端什么語言無關(guān)。我后端用的Java栖秕，在前臺JSP中引入資源時(shí)用的spring標(biāo)簽春塌。可從官網(wǎng)進(jìn)行下載簇捍，下載后文件結(jié)構(gòu)如圖：
structure.jpg
二只壳、使用
參照了兩篇博文：
- Markdown編輯器editor.md的使用
-
使用并改造editor.md在JAVA-WEB項(xiàng)目中實(shí)現(xiàn)Markdown編輯器
并參照下載后example文件夾下的simple.html代碼就可以對大致使用有所了解
三、SSM博客中的使用：
- 寫的博客主要在能夠支持標(biāo)準(zhǔn)Markdown語法的條件下支持上傳圖片和代碼顯示暑塑，因此在項(xiàng)目中主要使用到了如下的文件吼句，其中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中寫一個(gè)div節(jié)點(diǎn),包含兩個(gè)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"為包裹顯示內(nèi)容的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>)標(biāo)簽內(nèi)的name=""editormd-markdown-doc"值得設(shè)定一定別忘了事格，在之前的博客中沒有寫清楚這一點(diǎn)惕艳，導(dǎo)致調(diào)了半天才發(fā)現(xiàn)。
