富文本编辑器Editormd的配置使用_editor-md

作者：Cpp五条 | 2024-05-07 07:58:46

踩

editor-md

我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器，在富文本编辑器中，我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的，我们只需要在页面中配置一下插件提供的一些API即可。本例中使用Editormd来演示如何配置使用富文本编辑器。

Editormd简介

Editormd是国内开源的一款在线Markdown编辑器，可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

主要特性

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器。

支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能。
支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法。
支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram。
支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性。
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件。
兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备。
支持自定义主题样式。

官网地址：https://pandao.github.io/editor.md/
Editormd官网

创建文章表

在使用富文本编辑器之前，先来创建一个文章表article，这里只添加了最基本的几个字段，以后想要扩展的话还可以添加标签、时间、浏览量、点赞、评论等字段。建表SQL如下：

CREATE TABLE article(
	id int(10) NOT NULL AUTO_INCREMENT COMMENT '文章唯一id',
	author varchar(50) NOT NULL COMMENT '作者',
	title varchar(100) NOT NULL COMMENT '标题',
	content longtext NOT NULL COMMENT '文章内容'
	PRIMARY KEY (id)
)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8
1
2
3
4
5
6
7

建完表，我们就可以开始编写代码来使用富文本编辑器了。

配置使用

1、创建一个SpringBoot项目，配置数据库连接，我们这里连接的是MyBatis（注意MySQL8需要在url中配置时区）。

spring:
  datasource:
    username: root
    password: 123456
    #?serverTimezone=UTC解决时区的报错
    url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
  thymeleaf:
    cache: false

mybatis:
  mapper-locations: classpath:com/wunian/mapper/*.xml
  type-aliases-package: com.wunian.pojo
1
2
3
4
5
6
7
8
9
10
11
12
13

2、导入Editormd静态资源，静态资源的目录结构如下图所示。
Editormd静态资源目录结构
3、编写文章编辑页面editor.html，引入Editormd的CSS和js文本，添加Editormd配置。

<!DOCTYPE html>
<html cl1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/548127