SpringBoot整合Editor.Md实现Markdown富文本编辑器

Myth丶恋晨 2022-12-06 01:22 212阅读 0赞

## SpringBoot整合Editor.Md实现Markdown富文本编辑器 ##

**前言**：最近需要做一个后台管理，且需要有一个公告功能，可以实现图片上传等功能。于是，就想到了整合editor.md。本次后台管理是`SpringBoot + Thymeleaf` 实现的，ok，咱们搞起来。

首先简单了解一下什么是`editro.md`，[详情点击这里][Link 1]，点进去之后，是editor.md的github地址。

说明一下：这里我主要介绍的是：`SpringBoot如何整合editor.md实现富文本编辑功能。`

通过github我们可以看到，他有一个[examples目录][examples]，顾名思义就是使用示例，直接把整合项目下载下来，然后进入到examples目录，可以看到很多`.html页面`，直接打开就可以使用了。  
**那么，如何整合项目中来呢？**

*  首先，需要把`editor.md`需要的`静态资源文件`下载放到项目的`static目录`下；
 *  然后，把他的示例代码部分复制过来就行。
 *  最后根据自己本地项目修改一下静态资源引入路径就好了；

没错，就是这么简单，详细的后面慢慢说，**先看看我的本地效果图：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODE1NzU0_size_16_color_FFFFFF_t_70_pic_center]

**然后看看项目启动后的效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODE1NzU0_size_16_color_FFFFFF_t_70_pic_center 1]

好了，接下来详细说一说需要哪些东西。

**`第一步的静态资源引入`**  
我几乎把需要的和不需要的都资源文件都引入了，具体我就不截图了，太麻烦，我直接给个百度云盘链接，大家拿来就能用。[点我下载editor.md所需静态资源文件][editor.md]，提取码 `6666`。下载解压之后，把解压后的文件放到`resources下的static`目录说下就行。

**`第二步项目代码部分`**  
我在resources的`templates`目录下新建了一个`test.html页面`，页面代码如下：

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8"/>
        <title>Emoji - Editor.md examples</title>
        
        <link rel="stylesheet" href="../static/editormd/css/style.css"
              th:href="@{/editormd/css/style.css}"/>
        <link rel="stylesheet" href="../static/editormd/css/editormd.css"
              th:href="@{/editormd/css/editormd.css}"/>
    </head>
    <body>
    
    <h1>EditorMD</h1>
    
    
    <div id="editormd_id">
        
        <textarea id="htmlContent" class="editorMd-html-textarea" name="editorMd-html-textarea" placeholder="请输入内容...">
        </textarea>
    
        
        <textarea class="editorMd-text-textarea" name="editorMd-text-textarea" style="display:none;" id="textContent">
        </textarea>
    </div>
    
    
    <script src="../static/editormd/js/jquery.min.js"
            th:src="@{/editormd/js/jquery.min.js}"></script>
    <script src="../static/editormd/editormd.js"
            th:src="@{/editormd/editormd.js}"></script>
    <script>
    
        //初始化editorMD
        let testEditor;
        $(function () { 
            testEditor = editormd("editormd_id", { 
                width: "90%",
                height: 720,
                toc: true,
                emoji: true,//表情功能开启
                taskList: true,
                syncScrolling: "single",
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/uploadImg",       //图片上传URL 即后台的图片上传接口URL
                path: '/editormd/lib/',          //项目启动路径
                //path: '../static/editormd/lib/', //本地路径
                saveHTMLToTextarea: true
            });
        });
    </script>
    </body>
    </html>

然后是后台接口，其实就一个图片上传的接口，如下：

@Controller
    public class TestController { 
    
        //文件上传的物理保存路径，大家根据自己实际情况设置就行 C:/Users/czj/Desktop/dipImage/ 
        //注意：如果不是保存在项目默认的静态资源目录，需要设置项目静态资源目录哦 比如我这里就要设置，否则会显示不出来图片的，如何设置见下文
        @Value("${upload.filePath}")
        public String filePath;
        //文件显示的项目路径 http://localhost:${server.port}/ 如果有域名就改成http://域名/
        @Value("${project.path}")
        public String projectPath;
    
        @GetMapping("toTest")
        public String toTest() { 
            return "test";
        }
    
        //editorMd上传图片 需要说明的是，返回值不能乱写，只能是Map，Map里面也不能乱写，包括数据类型
        //甚至editormd-image-file也不能乱写，除非修改editor.md的源码，是可以改的，我没去找哪儿改，嫌麻烦，有兴趣的小伙伴改完告诉我最好了 哼哼...
        @RequestMapping(value = "/uploadImg")
        public @ResponseBody
        Map<String, Object> upload(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file) { 
            return this.uploadImg(file);
        }
    	
    	//具体的返回值Map请看这里
        public Map<String, Object> uploadImg(MultipartFile file) { 
            String filename = file.getOriginalFilename();
            if (null == filename) { 
                throw new RuntimeException("图片不存在");
            }
            // 定义上传文件保存路径 年份 + 月份 + 日期 + 文件名 我这里是将图片重命名了，并且每天的图片分开保存在不同的目录，防止同一目录图片过多导致卡顿，但是没有做图片去重，md5 base64啥的小伙伴们自己去搞哈
            int year = DateUtils.getYear(Calendar.getInstance());
            int month = DateUtils.getMonth(Calendar.getInstance());
            int date = DateUtils.getDate(Calendar.getInstance());
            String newPath = year + "/" + month + "/" + date + "/";
            String path = filePath + newPath;
    
            // 新建文件目录
            File uploadFile = new File(path, filename);
            // 判断路径是否存在，如果不存在就创建一个
            if (!uploadFile.getParentFile().exists()) { 
                uploadFile.getParentFile().mkdirs();
            }
    
            Map<String, Object> resultMap = new HashMap<String, Object>();
            //文件上传
            try { 
                file.transferTo(uploadFile);
                resultMap.put("success", 1);//这里还不能返回"1"，即字符串1，好坑啊，不知道为什么...
                resultMap.put("message", "上传成功！");
            } catch (IOException e) { 
                e.printStackTrace();
                resultMap.put("success", 0);
                resultMap.put("message", "文件上传失败！");
            }
            int success = Integer.parseInt(resultMap.get("success").toString());
            if (success == 1) { 
                //文件重命名 时间戳 新的名字大家随意取，我这儿图简单
                long l;
                synchronized (TestController.class) { 
                    l = System.currentTimeMillis();
                }
                String newName = l + filename.substring(filename.lastIndexOf("."));
                boolean b = uploadFile.renameTo(new File(path + newName));
                if (b) { 
                    resultMap.put("url", projectPath + newPath + newName);
                } else { 
                    resultMap.put("url", projectPath + newPath + filename);
                }
            }
            return resultMap;
        }
    
    }

这里设置一下项目静态资源目录，便于访问图片：

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
    
        /** * 设置静态资源访问路径 * <p> * addResourceHandler 设置的是相对路径 * addResourceLocations 设置的是绝对路径 本地新增路径需添加file:前缀，直接添加会覆盖springboot默认配置 * * @param registry */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            //资源路径映射配置
            registry.addResourceHandler("/**")
                    .addResourceLocations("classpath:templates/", "classpath:static/", "file:C:/Users/czj/Desktop/dipImage/");
        }
    
    }

**OK，到此，整合完毕。**

如果对你有帮助，不妨点个赞，谢谢~

[Link 1]: https://github.com/pandao/editor.md
[examples]: https://github.com/pandao/editor.md/tree/master/examples
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODE1NzU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/48dc0cd1e9e647bba4b761cf7c8c8fca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODE1NzU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/8c2e0faa2b7a4e57a90403844a982fc3.png
[editor.md]: https://pan.baidu.com/s/1Qbox1trxmqpNi8wfx1BQiw