狂神说：Springboot学习笔记（⼗四）——富⽂本编辑器⽂章⽬录
⼀、简介
思考：我们平时在博客园，或者CSDN等平台进⾏写作的时候，有同学思考过他们的编辑器是怎么实现的吗？
在博客园后台的选项设置中，可以看到⼀个⽂本编辑器的选项：
其实这个就是富⽂本编辑器，市⾯上有许多⾮常成熟的富⽂本编辑器，⽐如：
总之，⽬前可⽤的富⽂本编辑器有很多......这只是其中的⼀部分
⼆、Editor.md
我这⾥使⽤的就是Editor.md，作为⼀个资深码农，Mardown必然是我们程序猿最喜欢的格式，看下⾯，就爱上了！
字段
备注id
int ⽂章的唯⼀ID author
varchar 作者title
varchar 标题content longtext
⽂章内容
解压以后，在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项⽬配置
spring:
datasource:
username: root
password: 123456
#?serverTimezone=UTC解决时区的报错
url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8  driver-class-name: sql.cj.jdbc.Driver
<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);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN"
"/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}
</delete>
</mapper>
既然已经提供了 myBatis 的映射配置⽂件，⾃然要告诉 spring boot 这些⽂件的位置
mybatis:
mapper-locations: classpath:com/kuang/mapper/*.xml
type-aliases-package: com.kuang.pojo
jquery在线免费学习编写⼀个Controller测试下，是否ok；
四、⽂章编辑整合（重点）
1、导⼊ editor.md 资源 ，删除多余⽂件
2、编辑⽂章页⾯ editor.html、需要引⼊ jQuery；
<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="">
<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="shortcut icon" href="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>
标题：<input type="text" name="title">
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。