# RichTextEditor **Repository Path**: zwtgit/rich-text-editor ## Basic Information - **Project Name**: RichTextEditor - **Description**: 富文本编辑器，我这里使用的就是Editor.md，Mardown必然是我们程序猿最喜欢的格式。 功能：文章编辑，文章展示，表情包等。详情请见：https://www.cnblogs.com/zwtblog/p/15211654.html - **Primary Language**: Java - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2021-08-31 - **Last Updated**: 2022-06-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 简介 项目地址：https://gitee.com/zwtgit/rich-text-editor 思考：我们平时在博客园，或者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 我这里使用的就是Editor.md 我们可以在官网下载它：https://pandao.github.io/editor.md/ ， 得到它的压缩包！ 解压以后，在examples目录下面，可以看到他的很多案例使用！学习，其实就是看人家怎么写的，然后进行模仿就好了！ 我们可以将整个解压的文件倒入我们的项目，将一些无用的测试和案例删掉即可！ # 基础工程搭建 ## 数据库设计 article：文章表 | 字段 | | 备注 | | ------- | -------- | ------------ | | id | int | 文章的唯一ID | | author | varchar | 作者 | | title | varchar | 标题 | | content | longtext | 文章的内容 | 建表SQL： ```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项目配置 ```xml org.springframework.boot spring-boot-starter-jdbc mysql mysql-connector-java runtime org.projectlombok lombok org.mybatis.spring.boot mybatis-spring-boot-starter 2.0.0 ``` ```yml 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、实体类： ```java //文章类 @Data @NoArgsConstructor @AllArgsConstructor public class Article implements Serializable { private int id; //文章的唯一ID private String author; //作者名 private String title; //标题 private String content; //文章的内容 } ``` 3、mapper接口： ```java @Mapper @Repository public interface ArticleMapper { //查询所有的文章 List
queryArticles(); //新增一个文章 int addArticle(Article article); //根据文章id查询文章 Article getArticleById(int id); //根据文章id删除文章 int deleteArticleById(int id); } ``` ```xml insert into article (author,title,content) values (#{author},#{title},#{content}); delete from article where id = #{id} ``` **既然已经提供了 myBatis 的映射配置文件，自然要告诉 spring boot 这些文件的位置** ```yml mybatis: mapper-locations: classpath:com/zwt/mapper/*.xml type-aliases-package: com.zwt.pojo ``` 编写一个Controller测试下，是否ok； 写一个controller测试mybatis，并且注意 XXXmapper 的位置在 resources 下 注意这个地方对应的mapper配置 ```yml mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.zwt.pojo ``` ```java @RestController public class MyBatisController { @Autowired private ArticleMapper articleMapper; @GetMapping("/queryArticles") public List
queryArticles(){ List
articles = articleMapper.queryArticles(); for(Article article : articles) { System.out.println(article); } return articles; } } @Mapper @Repository public interface ArticleMapper { //查询所有的文章 List
queryArticles(); //新增一个文章 int addArticle(Article article); //根据文章id查询文章 Article getArticleById(int id); //根据文章id删除文章 int deleteArticleById(int id); } ``` # 文章编辑整合（重点） 1、导入 editor.md 资源 ，删除多余文件 2、编辑文章页面 editor.html、需要引入 jQuery； ```html zwt的Blog
标题：
作者：
``` 3、编写Controller，进行跳转，以及保存文章 ```java @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中添加配置 ```java //图片上传 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址 ``` 2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖！ ```java //博客图片上传问题 @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中进行配置即可！ ```java @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文件 ```java // Emoji graphics files url path editormd.emoji = { path : "../editormd/plugins/emoji-dialog/emoji/", ext : ".png" }; ``` # 文章展示 1、Controller 中增加方法 ```java @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 ```java

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