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

小咪咪 2023-10-08 20:26 120阅读 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 "保存成功！";
        }
    }

这里使用了Thymeleaf来渲染Markdown编辑器页面，使用@Controller注解来处理请求，使用@PostMapping注解来处理保存操作。

### 五、运行程序 ###

运行程序，在浏览器中访问http://localhost:8080/editor即可看到Markdown编辑器页面。在编辑器中输入Markdown文本，点击保存按钮，将会将Markdown内容提交到/save处理方法中进行保存。