富文本编辑器

  • Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费
  • wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。
  • TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。
  • 百度ueditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,缺点是已经没有更新了
  • kindeditor——界面经典。
  • Textbox——Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。
  • CKEditor——国外的,界面美观。
  • quill——功能强大,还可以编辑公式等
  • simditor——界面美观,功能较全。
  • summernote——UI好看,精美
  • jodit——功能齐全
  • froala Editor——界面非常好看,功能非常强大,非常好用(非免费)

Editor.md

下载和安装

1
npm install editor.md
  • 解压以后,在examples目录下面,可以看到他的很多案例使用!
  • 抽取有用的文件复制进一个editormd文件夹,然后放到SpringBoot项目的static文件下

测试环境搭建

  • 数据库设计,article文章表

  • 建一个SpringBoot项目,配置数据库连接
1
2
3
4
5
6
7
spring:
datasource:
data-username: root
data-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
  • 实体类
1
2
3
4
5
6
7
8
9
10
11
//文章类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article implements Serializable {

private int id; //文章的唯一ID
private String author; //作者名
private String title; //标题
private String content; //文章的内容
}
  • Mapper接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Mapper
@Repository
public interface ArticleMapper {
//查询所有的文章
List<Article> queryArticles();

//新增一个文章
int addArticle(Article article);

//根据文章id查询文章
Article getArticleById(int id);

//根据文章id删除文章
int deleteArticleById(int id);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.lzy.dao.ArticleMapper">

<select id="queryArticles" resultType="Article">
select * from article
</select>

<select id="getArticleById" resultType="Article">
select * from article where id = #{id}
</select>

<insert id="addArticle" parameterType="Article">
insert into article (author,title,content) values (#{author},#{title},#{content});
</insert>

<delete id="deleteArticleById" parameterType="int">
delete from article where id = #{id}
</delete>

</mapper>
  • MyBatis映射配置文件
1
2
mybatis.mapper-locations=classpath:/mapper/*.xml
mybatis.type-aliases-package=com.lzy.pojo
  • 编写一个Controller测试一下
1
2
3
4
5
6
7
8
9
10
11
12
@Controller
public class ArticleController {

@Autowired
ArticleMapper articleMapper;
@RequestMapping("/get")
@ResponseBody
public List<Article> getArticle(){
List<Article> articles = articleMapper.queryArticles();
return articles;
}
}

文章编辑整合

前端页面

  • 导入editor.md的资源,删除多余的文件
  • templates下·新建·editor.html,需要引入jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>小李'Blog</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<!--Editor.md-->
<!--CSS-->
<link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>

<body>

<div class="BigBox" style="height:500px">
<!--博客表单 编辑器放在文本域表单里面,通过submit提交-->
<form name="mdEditorForm">
<div>
标题:<input type="text" name="title">
</div>
<div>
作者:<input type="text" name="author">
</div>
<!--编辑区域-->
<div id="article-content">
<textarea name="content" id="content" style="display:none;"> </textarea>
</div>
</form>
</div>
</body>

<!--jQuery-->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!--JS-->
<script th:src="@{/editormd/editormd.min.js}"></script>


<script type="text/javascript">
$(function () {
var testEditor = editormd("article-content", {
width: "100%",
height: 400,
syncScrolling: "single",
path: "/editormd/lib/",
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
emoji: true,
theme: "default",//工具栏主题[default | dark]
previewTheme: "default",//预览主题[default | dark]
editorTheme: "default",//编辑主题[default | dark]
tex: true, // 开启科学公式TeX语言支持,默认关闭
flowChart: true, // 开启流程图支持,默认关闭
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
//图片上传
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/article/file/upload", //这个是上传图片时的访问地址
onload: function () {
console.log('onload', this);
},
/*指定需要显示的功能按钮*/
toolbarIcons: function () {
return ["undo", "redo", "|",
"bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
"h1", "h2", "h3", "h4", "h5", "h6", "|",
"list-ul", "list-ol", "hr", "|",
"link", "reference-link", "image", "code", "preformatted-text",
"code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
"goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
"help", "info", "releaseIcon", "index"]
},

/*自定义功能按钮,下面我自定义了2个,一个是发布,一个是返回首页*/
toolbarIconTexts: {
releaseIcon: "<span bgcolor=\"gray\">发布</span>",
index: "<span bgcolor=\"red\">返回首页</span>",
},

/*给自定义按钮指定回调函数*/
toolbarHandlers: {
releaseIcon: function (cm, icon, cursor, selection) {
//表单提交
mdEditorForm.method = "post";
mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
mdEditorForm.submit();
},
index: function () {
window.location.href = '/'; //首页跳转
},
}
});
});
</script>

</html>
  • 编写Controller,进行跳转,以及保存文文章
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Controller
@RequestMapping("/article")
public class ArticleController {

@GetMapping("/toEditor")
public String toEditor(){
return "editor";
}

@PostMapping("/addArticle")
public String addArticle(Article article){
articleMapper.addArticle(article);
return "editor";
}
}

图片上传

  • editor.html的JS代码中添加
1
2
3
4
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址
  • 后端请求,接收保存这个图片, 需要导入 FastJson 的依赖!
1
2
3
4
5
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//博客图片上传问题
@RequestMapping("/file/upload")
@ResponseBody
public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
//上传路径保存设置

//获得SpringBoot当前项目的路径:System.getProperty("user.dir")
String path = System.getProperty("user.dir")+"/upload/";

//按照月份进行分类:
Calendar instance = Calendar.getInstance();
String month = (instance.get(Calendar.MONTH) + 1)+"月";
path = path+month;

File realPath = new File(path);
if (!realPath.exists()){
realPath.mkdir();
}

//上传文件地址
System.out.println("上传文件保存地址:"+realPath);

//解决文件名字问题:我们使用uuid;
String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "");
//通过CommonsMultipartFile的方法直接写文件(注意这个时候)
file.transferTo(new File(realPath +"/"+ filename));

//给editormd进行回调
JSONObject res = new JSONObject();
res.put("url","/upload/"+month+"/"+ filename);
res.put("success", 1);
res.put("message", "upload success!");

return res;
}
  • 解决文件回显显示的问题,设置虚拟目录映射!在我们自己拓展的MvcConfig中进行配置即可!
1
2
3
4
5
6
7
8
9
10
11
12
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

// 文件保存在真实目录/upload/下,
// 访问的时候使用虚路径/upload,比如文件名为1.png,就直接/upload/1.png就ok了。
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**")
.addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
}

}
  • 上传图片测试

表情包问题

  • 自己手动下载,emoji 表情包,放到图片路径下:
  • 修改editormd.js文件
1
2
3
4
5
// Emoji graphics files url path
editormd.emoji = {
path : "../editormd/plugins/emoji-dialog/emoji/",
ext : ".png"
};

文章展示

  • Controller 中增加方法,使用Restful风格带上文章ID查询
1
2
3
4
5
6
@GetMapping("/{id}")
public String show(@PathVariable("id") int id,Model model){
Article article = articleMapper.getArticleById(id);
model.addAttribute("article",article);
return "article";
}
  • 编写页面 article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title th:text="${article.title}"></title>
</head>
<body>

<div>
<!--文章头部信息:标题,作者,最后更新日期,导航-->
<h2 style="margin: auto 0" th:text="${article.title}"></h2>
<span>作者:</span><span style="float: left" th:text="${article.author}"></span>
<!--文章主体内容-->
<div id="doc-content">
<textarea style="display:none;" placeholder="markdown" th:text="${article.content}"></textarea>
</div>

</div>

<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
<!--jQuery-->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>

<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tocm: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true
});});
</script>
</body>
</html>