🍻 正在加载今日诗词....

SpringBoot实现富文本编辑器

阅读数： 次
原创 字数统计: 3.2k字   |   预计阅读时长≈ 15分钟

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。

聊聊富文本编辑器

简介

思考：我们平时在博客园，或者 CSDN 等平台进行写作的时候，有同学思考过他们的编辑器是怎么实现的吗？

在博客园后台的选项设置中，可以看到一个文本编辑器的选项：

image-20201223135858925

其实这个就是富文本编辑器，市面上有许多非常成熟的富文本编辑器，比如：

  • 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

我这里使用的就是 Editor.md，作为一个码农，Mardown 必然是我们程序猿最喜欢的格式，看下面，就爱上了！

image-20201223140314822

我们可以在官网下载它：https://pandao.github.io/editor.md/ ， 得到它的压缩包！

解压以后，在 examples 目录下面，可以看到他的很多案例使用！

学习，其实就是看人家怎么写的，然后进行模仿就好了！

我们可以将整个解压的文件倒入我们的项目，将一些无用的测试和案例删掉即可！

基础工程搭建

数据库设计

article：文章表

字段 类型 备注
id int 文章的唯一 ID
author varchar 作者
title varchar 标题
content longtext 文章的内容 
1
2
3
4
5
6
7
8
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article` (
`id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'int文章的唯一ID',
`author` varchar(50) NOT NULL COMMENT '作者',
`title` varchar(100) NOT NULL COMMENT '标题',
`content` longtext NOT NULL COMMENT '文章的内容',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

基础项目搭建

建一个 SpringBoot 项目配置

image-20201223141528902

image-20201223141813389

配置文件使用 yaml 格式的，CTRL + F6 修改文件名。

1
2
3
4
5
6
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.jdbc.Driver

在 pom 文件的 build 标签下 加入资源配置，将 java 目录下的 xml 文件编译进 classes

1
2
3
4
5
6
7
8
9
10
<!-- 资源配置 -->
<resources>
    <resource>
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
    </resource>
</resources>

加入 mybatis 依赖

1
2
3
4
5
6
<!--mybatis-->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.0.0</version>
</dependency>

实体类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.itjing.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

//文章类
@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
17
18
19
20
21
22
23
24
package com.itjing.mapper;

import com.itjing.entity.Article;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface ArticleMapper {
    //查询所有的文章
    List<Article> queryArticles();

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

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

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

}

mapper 映射文件

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.itjing.mapper.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 的映射配置文件，自然要告诉 spring boot 这些文件的位置

在 springboot 配置文件中配置：

1
2
3
4
# mybatis 相关
mybatis:
  type-aliases-package: com.itjing.entity
#  mapper-locations: classpath:com/itjing/mapper/*.xml

编写一个 Controller 测试下，是否 ok

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.itjing.controller;

import com.itjing.entity.Article;
import com.itjing.mapper.ArticleMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ArticleController {

    @Autowired
    private ArticleMapper articleMapper;

    @GetMapping("/add")
    public String add() {
        Article article = new Article();
        article.setAuthor("jinggege");
        article.setTitle("测试");
        article.setContent("测试可用性");
        articleMapper.addArticle(article);
        return "ok";
    }
}

可用！

文章编辑整合（重点）

1、导入 editor.md 资源 ，删除多余文件

2、编辑文章页面 editor.html、需要引入 jQuery 以及 Layui 的样式

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en" 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-->
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/editormd/css/layui.css}" />
    <link
      rel="shortcut icon"
      href="https://pandao.github.io/editor.md/favicon.ico"
      type="image/x-icon"
    />
  </head>

  <body>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <!--博客表单-->
          <form name="mdEditorForm">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="title"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="author"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
            </div>
            <div id="article-content">
              <textarea name="content" id="content" style="display:none;">
              </textarea>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>

  <!--editormd-->
  <script th:src="@{/editormd/lib/jquery.min.js}"></script>
  <script th:src="@{/editormd/editormd.js}"></script>

  <script type="text/javascript">
    var testEditor

    //window.onload = function(){ }
    $(function () {
      testEditor = editormd('article-content', {
        width: '95%',
        height: 400,
        syncScrolling: 'single',
        path: '../editormd/lib/',
        saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
        emoji: true,
        theme: 'dark', //工具栏主题
        previewTheme: 'dark', //预览主题
        editorTheme: 'pastel-on-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>

3、编写 Controller，进行跳转，以及保存文章

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
package com.itjing.controller;

import com.itjing.entity.Article;
import com.itjing.mapper.ArticleMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleMapper articleMapper;

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

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

图片上传问题

1、前端 js 中添加配置

1
2
3
4
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址

2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖！

1
2
3
4
5
6
<!--fastjson-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.73</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.mkdirs();
  }

   //上传文件地址
   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;
}

3、解决文件回显显示的问题，设置虚拟目录映射！在我们自己拓展的 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"
};

文章展示

1、Controller 中增加方法

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";
}

2、编写页面 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
49
50
51
52
53
54
<!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 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}" />
    <script th:src="@{/editormd/lib/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>

重启项目，访问进行测试！大功告成！

本文作者： LiJing
发布时间： 2020-12-22
最后更新： 2024-06-24
本文标题： SpringBoot实现富文本编辑器
本文链接： https://blog-yilia.xiaojingge.com/posts/58a76bff.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信
本站总访问量次 | 本站访客数人

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

喜欢看书、打代码、吃吃吃！我从没被谁知道，所以也没被谁忘记。在别人的回忆中生活，并不是我的目的。我只不过是自己一个人在努力罢了。