html页面中引用editor.md插件实现编辑文章

我们在做项目的时候经常会遇到需要编写文章的页面，那么简单又好用的编辑器是怎么做出来的呢？通常的做法是引入插件。比如editor.md来实现。
在html页面中运用editor.md插件步骤：

一、下载editor.md插件资源包

官网下载地址：https://pandao.github.io/editor.md/

如果官网打不开，我提供了我的百度网盘链接，可直接下载。

百度网盘链接：https://pan.baidu.com/s/1nYQ8aWfgZdc5Y6-Aps6F2Q

提取码：i8g5

二、解压压缩包，如果不嫌比较大的话可以直接将结业后的文件夹拖入到项目的静态资源目录下。

三、在html中引入资源文件

 <link th:href="@{/lib/editormd/css/editormd.min.css}" rel="stylesheet">

rel="stylesheet"尽量加上否则可能样式引入失败。

<script th:src="@{/lib/editormd/editormd.min.js}"></script>

四、初始化编辑器

   <script>
        var contentEditor;

        $(function() {
            contentEditor = editormd("article", {
                width   : "100%",
                height  : 600,
                syncScrolling : "single",
                path    : "/lib/editormd/lib/"
            });
        });
    </script>

对应的编辑器位置的html写法

<div class="compose-message" id="article" style="z-index: 999">
 <!--<div class="summernote"></div>-->   
 <textarea style="display: none"> 
 [TOC]
#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
#### Editor.md director
</textarea>
</div>

注意：id属性的值和js中的一致，只需要一个textarea标签就可以，不需要写两个。
引入完成，看看效果吧