【SpringBoot学习】21、SpringBoot集成 Editor.md 富文本编辑器

Tellsea

已于 2022-02-02 13:35:48 修改

阅读量1.1k

点赞数

分类专栏： Spring Boot 文章标签： java springboot editor

于 2021-11-23 15:16:47 首次发布

本文链接：https://blog.csdn.net/qq_38762237/article/details/121494038

版权

Spring Boot 专栏收录该内容

55 篇文章 43 订阅

订阅专栏

文章目录

技术分享区

文章简介

通过简单的讲解，快速的上手一个高大上的富文本编辑器。以下简称编辑器，并实现实际开发中最常用的功能：

创建一个富文本编辑器
获取富文本编辑器的内容（存数据库）
设置富文本编辑器的内容（数据库读出来修改）

准备工作

创建一个空的springboot项目，添加thymeleaf依赖。

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

下载editor.md，这里给出下载地址：

GitHub 官方地址：https://github.com/pandao/editor.md

直接点击下载：https://github.com/pandao/editor.md/archive/master.zip

在static目录下面创建一个editor文件夹。解压下载的文件，复制以下文件到editor文件夹下。

css
fonts
images
lib
plugins
editormd.min.js

然后下载 jQuery，放到 static 目录下面。

下载地址：http://jquery.com/download/

创建编辑器

【第一步】新建一个editormd-create.html。引入相关css:

<link rel="stylesheet" data-th-href="@{/editor/css/editormd.min.css}">

【第二步】编写<body>中的内容：

<div id="test-editormd">
	<textarea style="display:none;"></textarea>
</div>

【第三步】引入相关 js 文件：

<script data-th-src="@{/jquery.min.js}"></script>
<script data-th-src="@{/editor/editormd.min.js}"></script>

【第四步】初始化编辑器：

var testEditor;
$(function () {
    testEditor = editormd("test-editormd", {
        height: 590,
        htmlDecode: true,  // 你可以过滤标签解码
        syncScrolling: "single",
        path: "/admin/editor/lib/",
        saveHTMLToTextarea: true,

        emoji: true,
        watch: false,
        codeFold: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
    });
});

获得编辑器内容

通过上面的创建编辑器的过程，我们获取编辑器的内容变得格外简单：

testEditor.getMarkdown();

设置编辑器内容

【第一步】新建一个editormd-create.html。引入相关css:

<link rel="stylesheet" data-th-href="@{/editor/css/editormd.preview.min.css}">

【第二步】编写<body>中的内容：

<div id="test-editormd-view">
	<textarea name="test-editormd-markdown-doc" th:utext="${article.content}"></textarea>
</div>

【第三步】引入相关 js 文件：

<script data-th-src="@{/jquery.min.js}"></script>
<script data-th-src="@{/editor/lib/marked.min.js}"></script>
<script data-th-src="@{/editor/lib/prettify.min.js}"></script>
<script data-th-src="@{/editor/lib/raphael.min.js}"></script>
<script data-th-src="@{/editor/lib/underscore.min.js}"></script>
<script data-th-src="@{/editor/lib/sequence-diagram.min.js}"></script>
<script data-th-src="@{/editor/lib/flowchart.min.js}"></script>
<script data-th-src="@{/editor/lib/jquery.flowchart.min.js}"></script>
<script data-th-src="@{/editor/editormd.min.js}"></script>

【第四步】初始化编辑器：

var testEditormdView;
$(function () {
    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        // htmlDecode: "video",  // 你可以过滤标签解码
        //toc             : false,
        tocm: true,    // Using [TOCM]
        tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true
    });
});

生成文章目录

通过上一步的设置编辑器内容，这里注意初始化时，其中一个参数，tocContainer: "#custom-toc-container" // 自定义 ToC 容器层，这句话制定了生成目录的容器，也就是说，写一个id为custom-toc-container的div，即可自动生成文章目录，例如：

<div class="markdown-body" id="custom-toc-container"></div>

技术分享区

在这里插入图片描述

Tellsea

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【SpringBoot学习】21、SpringBoot集成 Editor.md 富文本编辑器

文章目录文章简介准备工作创建编辑器获得编辑器内容设置编辑器内容生成文章目录相关链接微信公众号文章简介通过简单的讲解，快速的上手一个高大上的富文本编辑器。以下简称编辑器，并实现实际开发中最常用的功能：创建一个富文本编辑器获取富文本编辑器的内容（存数据库）设置富文本编辑器的内容（数据库读出来修改）准备工作创建一个空的springboot项目，添加thymeleaf依赖。<dependency> <groupId>org.springframework.b
复制链接

扫一扫