SSM博客开发：前台插件-editor.md

一、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文档页面展示：

1. 引入

 <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>

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