Spring Boot 2 整合 editor.md

发表于   |   分类于

在线的 markdown 编辑器。

editor.md 是一款开源的在线 markdown 编辑器，多的不多说，反正就是好用。

对于一个博客系统，一个好用的编辑器是很重要的。今天下午折腾了很久，终于知道怎么用了。

介绍

阅读前提：

  • 会使用 IDEA 创建 Spring Boot 项目
  • 了解 thymeleaf 的简单使用

本文将介绍如何在 Spring Boot 中整合 editor.md，将要实现的功能也很简单，就是启动 Spring Boot 应用之后，访问 127.0.0.1/edit 可以使用编辑器。

点击「预览」可以将输入的内容提交到后端，后端也没有保存到数据库而是直接返回 HTML 页面，最后得到这样的效果。

思路

虽然说这个项目不复杂，但是的确耗费了我很多的时间，原因就是因为不理解其中的执行顺序。

先说这个 editor.md，它的在线编辑功能应该是由 css 和 js 完成的，所以想要在我们的项目中使用这个编辑器，实际上就是要新建一个 html 文档，然后引用它提供的 css 和 js。（由于路径问题，以及对它的不理解，导致了我差一点放弃了。）

假设我们已经建好了一个 html 文档，并成功的引入了所需要的文件，达到了在线编辑的功能。那么接下来就是将数据提交到后台，此时需要一个 form 表单，将我们输入的内容提交到后台。注意这里是提交的是我们输入的那些文字，而不是 editor.md 帮我们转换之后的内容。

一开始我还在想，提交到后台之后怎么存储？下一次怎么展示出来？实际上，存储的就是原始的 markdown 格式的文字，展示的时候也是这部分内容，只不过给用户看的时候，再一次在 css 和 js 的作用下，展示出好看的样式。

项目准备

  • 创建 Spring Boot 项目
  • 添加依赖
1
2
3
4
5
6
7
8
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  • 添加配置

最后那个是配置静态地址，是可以配置多个的。作用是：当访问 127.0.0.1/css/style.css 这个文件的时候，会在 templates 目录下寻找这个文件。

1
2
3
4
5
6
7
8
# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false

spring.resources.static-locations=classpath:/templates/

下载 editor.md

下载地址

  • 下载之后将文件夹的内容复制到项目中的 templates 目录下

新建 simple.html

这个页面就是在线编辑的页面。

  • 删除 examples 目录下的 html 文件（还有其他文件可以删除，有待测试）
  • 在 examples 下新建一个 simple.html，并编辑，代码如下
  • 需要注意的地方：引入 css、js 以及 form 表单
  • 引入 css 和 js 是为了实现在线编辑的功能，form 表单是为了将内容提交到后台
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <title>Simple example - Editor.md examples</title>

        <!--关键代码：引入 css 代码，路径一定要正确-->
        <link rel="stylesheet" th:href="@{/examples/css/style.css}"/>
        <link rel="stylesheet" th:href="@{/css/editormd.css}" />


        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Simple example</h1>
            </header>

            <!--关键代码：form 表格，不然没法提交-->
            <form action="/preview" method="post">
                <input type="submit" value="预览">
                <!--通过 textarea 标签的 name 值，在后台取到我们输入的内容。-->
                <div class="editormd" id="test-editormd">
                    <textarea class="editormd-markdown-textarea" name="text"></textarea>
                </div>
            </form>

        </div>

        <!--关键代码：引入 js。顺序和路径都要注意。-->
        <script src="examples/js/jquery.min.js"></script>
        <script src="/editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;
            // 这里的 test-editormd 与上面 div 的 id 相对应
            // 所有的名字尽量不要改，免得出错
            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                });
            });
        </script>

    </body>
</html>

创建接口

  • 新建一个 Controller，映射到上面这个 html 文件，如果不出意外的话访问 127.0.0.1:8080/edit 就可以在线编辑了
1
2
3
4
5
6
7
8
@Controller
public class IndexController {

    @GetMapping("/edit")
    public String edit() {
        return "/examples/simple";
    }
}
  • 上面表单提交的地址是 /preview，所以还需要创建一个接口，这个接口将接收传递过来的文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Controller
public class IndexController {

    @GetMapping("/edit")
    public String edit() {
        return "/examples/simple";
    }

    @PostMapping("/preview")
    public String preview(String text, ModelMap map) {
        map.addAttribute("text", text);
        return "preview";
    }
}

新建 preview.html

  • 在 templates 目录下新建 preview.html
  • 这里就是将文字传递过来，并由 editor.md 替我们转换
  • 关键点是引入 css 和 js，以及如何使用传递过来的文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预览</title>
    <link rel="stylesheet" href="css/editormd.css">
    <link rel="stylesheet" href="css/editormd.preview.css">
    <script src="examples/js/jquery.min.js"></script>
    <script src="lib/marked.min.js"></script>
    <script src="lib/prettify.min.js"></script>
    <script src="editormd.min.js"></script>
</head>
<body>
<div id="doc-content">
    <textarea style="display:none;" th:text="${text}"></textarea>
</div>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {
            htmlDecode: "style,script,iframe",
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
        });});
</script>
</body>
</html>

总结

白天折腾了一个下午，晚上为了写这篇博客又折腾了很久，文章还有很多地方说得不清楚，我已经尽力。

目前已知的不足：

  • thymeleaf 的路径问题，导致文件位置不敢随便改
  • 不知道那些文件是可以删除的，导致添加了很多没有到的文件
  • 不清楚 editor.md 的配置，像如何添加表情
  • …

勉强会用，但是真正运用到项目中，可能还要踩很多坑。

拓展阅读