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

最新推荐文章于 2024-10-07 09:37:09 发布

凉凉的西瓜

最新推荐文章于 2024-10-07 09:37:09 发布

阅读量1.6k

点赞数 7

分类专栏：随笔

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

版权

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="请输入内容...">