个人博客之editor.md集成

想往博客里增加一个写博客的功能，网上查了一圈了解到一个开源免费markdown富文本编辑器，话不多说，下面介绍一下如何在个人项目里集成editormd。

一、这是效果图，如果满足你的要求再往下看

二、下载插件
项目地址：http://pandao.github.io/editor.md/
下载安装包后放在相应的目录中并引用

三、下载下来的文件夹中有一个example，这是官方提供给我们的一个实例文件夹，由于需求不是很多，我就找了简单的一个

四、在你的项目里引入相关文件

 <link rel="stylesheet" href="${pageContext.request.contextPath}/static/editormd/style.css"/>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/static/editormd/css/editormd.css"/>
 <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
 <script src="${pageContext.request.contextPath}/static/editormd/editormd.min.js"></script>

五、在你的页面加上对应的id

<div id="layout" class="editor">
    <div id="test-editormd">
        <textarea></textarea>
    </div>
</div>

六、加入js代码

var testEditor;
testEditor = editormd("test-editormd", {
     placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
     width: "90%",
     height: 640,
     syncScrolling: "single",  
     path: "lib/js/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
     theme: "dark",//工具栏主题
     previewTheme: "dark",//预览主题
     editorTheme: "pastel-on-dark",//编辑主题
     saveHTMLToTextarea: true,
     emoji: false,
     taskList: true, 
     tocm: true,         // Using [TOCM]
     tex: true,                   // 开启科学公式TeX语言支持，默认关闭
     flowChart: true,             // 开启流程图支持，默认关闭
     sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
     toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
         return editormd.toolbarModes['simple']; // full, simple, mini
      },
});
//上面的挑有用的写上去就行

这样你的页面就有一个简单的编译器了

testEditor.getMarkdown();
// 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。