文章简介

通过简单的讲解，快速的上手一个高大上的富文本编辑器。以下简称编辑器，并实现实际开发中最常用的功能：

创建一个富文本编辑器
获取富文本编辑器的内容（存数据库）
设置富文本编辑器的内容（数据库读出来修改）

准备工作

创建一个空的springboot项目，添加thymeleaf依赖。

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

下载editor.md，这里给出下载地址：

GitHub 官方地址：https://github.com/pandao/editor.md

直接点击下载：https://github.com/pandao/editor.md/archive/master.zip

在static目录下面创建一个editor文件夹。解压下载的文件，复制以下文件到editor文件夹下。

css
fonts
images
lib
plugins
editormd.min.js

然后下载 jQuery，放到 static 目录下面。

下载地址：http://jquery.com/download/

创建编辑器

【第一步】新建一个editormd-create.html。引入相关css:

<link rel="stylesheet" data-th-href="@{/editor/css/editormd.min.css}">

【第二步】编写<body>中的内容：

<div id="test-editormd">
	<textarea style="display:none;"></textarea>
</div>

【第三步】引入相关 js 文件：

<script data-th-src="@{/jquery.min.js}"></script>
<script data-th-src="@{/editor/editormd.min.js}"></script>

【第四步】初始化编辑器：

var testEditor;
$(function () {
    
    
    testEditor = editormd("test-editormd", {
    
    
        height: 590,
        htmlDecode: true,  // 你可以过滤标签解码
        syncScrolling: "single",
        path: "/admin/editor/lib/",
        saveHTMLToTextarea: true,

        emoji: true,
        watch: false,
        codeFold: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
    });
});

获得编辑器内容

通过上面的创建编辑器的过程，我们获取编辑器的内容变得格外简单：

testEditor.getMarkdown();

设置编辑器内容

【第一步】新建一个editormd-create.html。引入相关css:

<link rel="stylesheet" data-th-href="@{/editor/css/editormd.preview.min.css}">

【第二步】编写<body>中的内容：

<div id="test-editormd-view">
	<textarea name="test-editormd-markdown-doc" th:utext="${article.content}"></textarea>
</div>

【第三步】引入相关 js 文件：

<script data-th-src="@{/jquery.min.js}"></script>
<script data-th-src="@{/editor/lib/marked.min.js}"></script>
<script data-th-src="@{/editor/lib/prettify.min.js}"></script>
<script data-th-src="@{/editor/lib/raphael.min.js}"></script>
<script data-th-src="@{/editor/lib/underscore.min.js}"></script>
<script data-th-src="@{/editor/lib/sequence-diagram.min.js}"></script>
<script data-th-src="@{/editor/lib/flowchart.min.js}"></script>
<script data-th-src="@{/editor/lib/jquery.flowchart.min.js}"></script>
<script data-th-src="@{/editor/editormd.min.js}"></script>

【第四步】初始化编辑器：

var testEditormdView;
$(function () {
    
    
    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
    
    
        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        // htmlDecode: "video",  // 你可以过滤标签解码
        //toc             : false,
        tocm: true,    // Using [TOCM]
        tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true
    });
});

生成文章目录

通过上一步的设置编辑器内容，这里注意初始化时，其中一个参数，tocContainer: "#custom-toc-container" // 自定义 ToC 容器层，这句话制定了生成目录的容器，也就是说，写一个id为custom-toc-container的div，即可自动生成文章目录，例如：

<div class="markdown-body" id="custom-toc-container"></div>

微信公众号

每天Get一个小技巧

【SpringBoot学习】21、SpringBoot集成 Editor.md 富文本编辑器

文章目录