Springboot整合markdown编辑器【保姆级简易教程】-蒲公英云

Springboot整合markdown编辑器【保姆级简易教程】

小咪咪 2023-10-08 20:26 199阅读 0赞

在Spring Boot中，我们可以使用Thymeleaf和Spring MVC来实现整合Markdown编辑器的功能。

一、添加Markdown编辑器的依赖

在pom.xml文件中添加Markdown编辑器的依赖，例如使用Editor.md：

<dependency>
    <groupId>com.pandao</groupId>
    <artifactId>editor.md</artifactId>
    <version>1.5.0</version>
</dependency>

二、配置Thymeleaf

在application.properties文件中添加以下配置：

spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false

三、创建Markdown编辑器页面

在src/main/resources/templates目录下创建markdown.html文件，例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css" />
</head>
<body>
    <form method="post" th:action="@{/save}">
        <textarea id="editor" name="content"></textarea>
        <input type="submit" value="保存">
    </form>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>
    <script>
        $(function() {
            var editor = editormd("editor", {
                height: 640,
                placeholder: "请输入Markdown内容"
            });
        });
    </script>
</body>
</html>

注意：这里的form表单的action为/save，需要在Controller中添加对应的处理方法。

四、创建Controller

在src/main/java目录下创建MarkdownController.java文件，例如：

@Controller
public class MarkdownController {
    @GetMapping("/editor")
    public String editor() {
        return "markdown";
    }
    @PostMapping("/save")
    @ResponseBody
    public String save(@RequestParam("content") String content) {
        // 处理Markdown内容保存的逻辑
        return "保存成功！";
    }
}