个人博客使用Editer.md添加 markdown功能（使用thymeleaf模板引擎）

开源在线Markdown编辑器： https://pandao.github.io/editor.md/#download

一、下载源码

下载：https://github.com/pandao/editor.md

解压后可看到这些文件：

二、测试

2.1 依赖

博主的项目使用springboot构建，前后端一体，模板引擎使用的thymeleaf。

我们需要从刚刚下载的文件中提取以下文件：

editormd
|--css
|--fonts
|--images
|--lib
|--plugins
|--editormd.min.js

同时还需要jquery.min.js，可在这里找到

editormd
|--examples
	|--js
		|--jqery.min.js		

把上面的文件放在构建的springboot工程下的资源文件夹resources下：

2.2 测试md写作

依赖的引用改成thymeleaf模板引擎

<link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editormd/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

项目需要配置请求地址，最后启动springboot。效果如下：左边编辑栏、右边为html效果栏。

2.3 测试md2html

<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
<div id="test-markdown-view">
  <!-- Server-side output Markdown text -->
  <textarea style="display:none;">### Hello world!</textarea>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script type="text/javascript">
  $(function() {
    var testView = editormd.markdownToHTML("test-markdown-view", {
      // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
      // htmlDecode : true,  // Enable / disable HTML tag encode.
      // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
    });
  });
</script>

在textarea标签内的md格式的文本将转换为html文本显示。

<textarea style="display:none;">### Hello world!</textarea>

三、简单说明

3.1 md 测试说明

直接引用依赖为：

css: <link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" />
jquery: <script th:src="@{/js/jquery.min.js}"></script>
editormd: <script th:src="@{/editormd/editormd.min.js}"></script>

在js中又通过path : "editormd/lib/"引用了更多的依赖，所以将所有需要的依赖放在了这个目录下：

resources
	|--static
		|--editormd
			|--lib

因为lib里面的依赖还需要fonts、images等其他依赖，所以最后这些其他依赖也添加进去，就构建为这样：

resources
	|--static
		|--editormd
			|--css
			|--fonts
			|--images
			|--lib
			|--plugins
			|--editormd.min.js

3.2 md2html 测试说明

依赖的引用与md相同。

如果从数据库中读取数据，需要通过textarea标签显示，引用好依赖后，具体代码如下：

<!-- 文章主体内容 markdown转html-->
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;" th:utext="${articleContent.contentMd}"></textarea>
</div>

th:utext表示直接读取字符，不转义。