目录
- [简介]
- [Editor.md]
- [基础工程搭建]
- [数据库设计]
- [基础项目搭建]
- [文章编辑整合（重点）]
- [图片上传问题]
- [表情包问题]
- [文章展示]
简介
项目地址：https://gitee.com/zwtgit/rich-text-editor
思考：们平时在博客园，或者CSDN等平台进行写作的时候，他们的编辑器是怎么实现的？
市面上有许多非常成熟的富文本编辑器，比如：
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
们可以在官网下载它：https://pandao.github.io/editor.md/ ， 得到它的压缩包！
解压以后，在examples目录下面，可以看到他的很多案例使用！学习，其实就是看人家怎么写的，然后进行模仿就好了！
们可以将整个解压的文件倒入们的项目，将一些无用的测试和案例删掉即可！
基础工程搭建
数据库设计
article：文章表
| 字段 | 备注 | |
|---|---|---|
| id | int | 文章的唯一ID |
| author | varchar | 作者 |
| title | varchar | 标题 |
| content | longtext | 文章的内容 |
建表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
基础项目搭建
----------------
1、建一个SpringBoot项目配置
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.0</version>
spring: datasource:
username: root
password: 240055
时区报错
url: jdbc:mysql://localhost:3306/richtexteditor?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
driver-class-name: com.mysql.jdbc.Driver
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
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
select * from article
select * from article where id =
insert into article (author,title,content) values ({author},{title},{content});
delete from article where id =
**既然已经提供了 myBatis 的映射配置文件，自然要告诉 spring boot 这些文件的位置**
mybatis: mapper-locations: classpath:com/zwt/mapper/*.xml type-aliases-package: com.zwt.pojo
编写一个Controller测试下，是否ok；
写一个controller测试mybatis，并且注意 XXXmapper 的位置在 resources 下
注意这个地方对应的mapper配置
mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.zwt.pojo
@RestController public class MyBatisController {
@Autowired
private ArticleMapper articleMapper;
@GetMapping("/queryArticles")
public List<Article> queryArticles(){
List<Article> articles = articleMapper.queryArticles();
for(Article article : articles) {
System.out.println(article);
}
return articles;
}
} @Mapper @Repository public interface ArticleMapper {
//查询所有的文章
List<Article> queryArticles();
//新增一个文章
int addArticle(Article article);
//根据文章id查询文章
Article getArticleById(int id);
//根据文章id删除文章
int deleteArticleById(int id);
}
文章编辑整合（重点）
------------------------
1、导入 editor.md 资源 ，删除多余文件
2、编辑文章页面 editor.html、需要引入 jQuery；
3、编写Controller，进行跳转，以及保存文章
@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";
}
}
图片上传问题
----------------
1、前端js中添加配置
//图片上传 imageUpload : true, imageFormats : [“jpg”, “jpeg”, “gif”, “png”, “bmp”, “webp”], imageUploadURL : “/article/file/upload”, // //这个是上传图片时的访问地址
2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖！
//博客图片上传问题 @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; }
3、解决文件回显显示的问题，设置虚拟目录映射！在们自己拓展的MvcConfig中进行配置即可！
@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文件
// Emoji graphics files url path editormd.emoji = { path : “../editormd/plugins/emoji-dialog/emoji/“, ext : “.png” };
文章展示
------------------------
1、Controller 中增加方法
@GetMapping(“/“) public String show(@PathVariable(“id”) int id,Model model){ Article article = articleMapper.getArticleById(id); model.addAttribute(“article”,article); return “article”; }
2、编写页面 article.html
重启项目，访问进行测试！大功告成！
> 原文创作：ML李嘉图
>
> 原文链接：https://www.cnblogs.com/zwtblog/p/15211654.html
## 文章列表
- [项目MyBlog](https://www.oomspot.com/post/xiangmumyblog)
- [阶段总结Java基础超进阶](https://www.oomspot.com/post/jieduanzongjiejavajichuchaojinjie)
- [链表题解](https://www.oomspot.com/post/lianbiaotijie)
- [郭德纲罗翔语录](https://www.oomspot.com/post/guodegangluoxiangyulu)
- [语录转载](https://www.oomspot.com/post/yuluzhuanzai)
- [设计模式更新中](https://www.oomspot.com/post/shejimoshigengxinzhong)
- [设计模式图解](https://www.oomspot.com/post/shejimoshitujie)
- [论坛项目](https://www.oomspot.com/post/luntanxiangmu)
- [计算机网络汇总](https://www.oomspot.com/post/jisuanjiwangluohuizong)
- [计算机网络TCP篇](https://www.oomspot.com/post/jisuanjiwangluotcppian)
- [计算机网络IP篇](https://www.oomspot.com/post/jisuanjiwangluoippian)
- [计算机网络HTTP篇](https://www.oomspot.com/post/jisuanjiwangluohttppian)
- [计算机组成原理图解](https://www.oomspot.com/post/jisuanjizuchengyuanlitujie)
- [计算机组成原理初见](https://www.oomspot.com/post/jisuanjizuchengyuanlichujian)
- [自定义starter](https://www.oomspot.com/post/zidingyistarter)
- [缓存穿透，击穿，雪崩详解](https://www.oomspot.com/post/huancunchuantoujichuanxuebengxiangjie)
- [笔试格式](https://www.oomspot.com/post/bishigeshi)
- [温故知新输入网址显示网页到底到底到底到底发生了什么？](https://www.oomspot.com/post/wenguzhixinshuruwangzhixianshiwangyedaodidaodidaod)
- [深度学习之神经网络的结构](https://www.oomspot.com/post/shenduxuexizhishenjingwangluodejiegou)
- [栈和队列题解方法](https://www.oomspot.com/post/zhanheduilietijiefangfa)
- [数组LeetCode笔试](https://www.oomspot.com/post/shuzuleetcodebishi)
- [数据结构](https://www.oomspot.com/post/shujujiegou)
- [数据库事故](https://www.oomspot.com/post/shujukushigu)
- [操作系统初见？见了好多次，次次都要学！](https://www.oomspot.com/post/caozuoxitongchujianjianlehaoduocicicidouyaoxue)
- [怎么通俗的理解Netty呢？](https://www.oomspot.com/post/zenmetongsudelijienettyni)
- [富文本编辑器SpringBoot](https://www.oomspot.com/post/fuwenbenbianjiqispringboot)
- [字符串题解方法](https://www.oomspot.com/post/zifuchuantijiefangfa)
- [基础算法学习](https://www.oomspot.com/post/jichusuanfaxuexi)
- [双指针题解](https://www.oomspot.com/post/shuangzhizhentijie)
- [刷题加油](https://www.oomspot.com/post/shuatijiayou)
- [分布式锁初见](https://www.oomspot.com/post/fenbushisuochujian)
- [互联网基础架构图解](https://www.oomspot.com/post/hulianwangjichujiagoutujie)
- [二叉树题解方法](https://www.oomspot.com/post/erchashutijiefangfa)
- [三体语录](https://www.oomspot.com/post/santiyulu)
- [Swagger初见](https://www.oomspot.com/post/swaggerchujian)
- [Spring初见](https://www.oomspot.com/post/springchujian)
- [SpringSecurity图解](https://www.oomspot.com/post/springsecuritytujie)
- [SpringSecurityShiro初见](https://www.oomspot.com/post/springsecurityshirochujian)
- [SpringBoot异步定时邮件任务](https://www.oomspot.com/post/springbootyibudingshiyoujianrenwu)
- [SpringBootWeb初见](https://www.oomspot.com/post/springbootwebchujian)
- [SprinBootSpringData整合](https://www.oomspot.com/post/sprinbootspringdatazhenghe)
- [SpingBootDubboZookeeper分布式](https://www.oomspot.com/post/spingbootdubbozookeeperfenbushi)
- [Shiro登陆流程认证图解](https://www.oomspot.com/post/shirodengluliuchengrenzhengtujie)
- [Redis数据类型应用场景](https://www.oomspot.com/post/redisshujuleixingyingyongchangjing)
- [Redis conf分析](https://www.oomspot.com/post/redisconffenxi)
- [Radius协议学习](https://www.oomspot.com/post/radiusxieyixuexi)
- [RabbitMQ进阶](https://www.oomspot.com/post/rabbitmqjinjie)
- [RabbitMQ初见](https://www.oomspot.com/post/rabbitmqchujian)
- [Netty初见三大组件简单使用](https://www.oomspot.com/post/nettychujiansandazujianjiandanshiyong)
- [MySql分区、分表和分库](https://www.oomspot.com/post/mysqlfenqufenbiaohefenku)
- [MySQL实战45讲2125笔记](https://www.oomspot.com/post/mysqlshizhan45jiang2125biji)
- [MySQL实战45讲1620笔记](https://www.oomspot.com/post/mysqlshizhan45jiang1620biji)
- [MySQL实战45讲1015笔记](https://www.oomspot.com/post/mysqlshizhan45jiang1015biji)
- [Linux实战常用命令](https://www.oomspot.com/post/linuxshizhanchangyongmingling)
- [Java爬虫小项目](https://www.oomspot.com/post/javapachongxiaoxiangmu)
- [JavaNIO](https://www.oomspot.com/post/javanio)
- [JVM调优命令](https://www.oomspot.com/post/jvmdiaoyoumingling)
- [JVM深入](https://www.oomspot.com/post/jvmshenru)
- [JVM初见](https://www.oomspot.com/post/jvmchujian)
- [JVM优化](https://www.oomspot.com/post/jvmyouhua)
- [JAVA中直接用Jdbc就能操作数据库了，为什么还要用spring框架?](https://www.oomspot.com/post/javazhongzhijieyongjdbcjiunengcaozuoshujukuleweish)
- [Hash题解方法](https://www.oomspot.com/post/hashtijiefangfa)
- [HashMap的转化时机](https://www.oomspot.com/post/hashmapdezhuanhuashiji)
- [HashMap源码分析](https://www.oomspot.com/post/hashmapyuanmafenxi)
- [Github博客园初见](https://www.oomspot.com/post/githubchujian)
- [GC优化案例](https://www.oomspot.com/post/gcyouhuaanli)
- [ElasticSearch7 X X初见模仿京东搜索的实战](https://www.oomspot.com/post/elasticsearch7xxchujianmofangjingdongsousuodeshizh)
- [Docker初见](https://www.oomspot.com/post/dockerchujian)
- [CI/CD企业级DevOps](https://www.oomspot.com/post/cicdqiyejidevops)
