一、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"值得设定一定别忘了，在之前的博客中没有写清楚这一点，导致调了半天才发现。
