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

最新推荐文章于 2023-03-16 09:57:00 发布

凉凉的西瓜

最新推荐文章于 2023-03-16 09:57:00 发布

阅读量1.6k

点赞数 7

分类专栏：随笔

本文链接：https://blog.csdn.net/qq_42815754/article/details/108539032

版权

随笔专栏收录该内容

74 篇文章 3 订阅

订阅专栏

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

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

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

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

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

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

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

在这里插入图片描述

然后看看项目启动后的效果
在这里插入图片描述

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

第一步的静态资源引入
我几乎把需要的和不需要的都资源文件都引入了，具体我就不截图了，太麻烦，我直接给个百度云盘链接，大家拿来就能用。点我下载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>

<!--这里的id=editormd_id就是下面的初始化editorMD的editormd_id-->
<div id="editormd_id">
    <!-- 第一个textarea是文本输入区域-->
    <textarea id="htmlContent" class="editorMd-html-textarea" name="editorMd-html-textarea" placeholder="请输入内容...">
    </textarea>

    <!--第二个textarea 是展示文本区域 要隐藏起来 display->none-->
    <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，到此，整合完毕。

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

凉凉的西瓜

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
SpringBoot整合Editor.Md实现Markdown富文本编辑器

SpringBoot整合Editor.Md实现Markdown富文本编辑器前言：最近需要做一个后台管理，且需要有一个公告功能，可以实现图片上传等功能。于是，就想到了整合editro.md。本次后台管理是SpringBoot + Thymeleaf 实现的，ok，咱们搞起来。首先简单了解一下什么是editro.md，详情点击这里，点进去之后，是editor.md的github地址。说明一下：这里我主要介绍的是：SpringBoot如何整合editor.md实现富文本编辑功能。通过github我们可以看
复制链接

扫一扫