微服务入门：富文本编辑器

微服务入门：富文本编辑器

---

前言

狂神说

---

一、简介

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

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

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

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

总之，目前可用的富文本编辑器有很多…这只是其中的一部分

二、Editor.md

Mardown语法格式

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

解压以后，在examples目录下面，可以看到他的很多案例使用！学习，其实就是看人家怎么写的，然后进行模仿就好了！

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

三、基础工程搭建

1、数据库设计

article：文章表

建表SQL：

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

2、基础项目搭建

1、建一个SpringBoot项目配置
application.yml

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

pom.xml

<resources>
   <resource>
       <directory>src/main/java</directory>
       <includes>
           <include>**/*.xml</include>
       </includes>
       <filtering>true</filtering>
   </resource>
</resources>

2、实体类：

//文章类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article implements Serializable {
   

   private int id; //文章的唯一ID
   private String author; //作者名
   private String title; //标题
   private String content; //文章的内容

}

3、mapper接口：

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

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

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

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

}

4、mapper.xml

<?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.kuang.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}