b2bchain区块链学习技术社区
本文介绍了21.博客系统项目开发之文章编辑模块功能实现求职学习资料，有助于帮助完成毕业设计以及求职，是一篇很好的资料。
对技术面试,学习经验等有一些体会，在此分享。
Spring Boot 博客系统项目开发之文章编辑模块功能实现
本项目的开源仓库地址为：https://github.com/ZHENFENG13/My-Blog
除 My-Blog 项目外，我也在维护另外一个开源项目，仓库地址为：https://github.com/newbee-ltd/newbee-mall
感兴趣的朋友可以去关注一下。
文章总览
本实验开始讲解文章模块的相关功能，该实验主要讲解文章编辑页面的相关实现以及插件整合，首先介绍目前主要的博客网站中文章布局的介绍，之后会介绍富文本编辑器的概念以及目前在博客文章中主要使用的 md 编辑器接介绍，最后是整合我们本次项目中使用的 Editor.md 编辑器以及相关功能的完善。
知识点
- 认识富文本编辑器
- 文章编辑页面制作
- Editor.md 编辑器介绍及整合
- Editor.md 编辑器图片上传功能完善
环境
- JDK 1.8 或者更高版本
- Spring Boot 2.1.0-RELEASE
- Maven 3+
富文本编辑器
富文本编辑器
在介绍富文本编辑器的概念之前，首先来谈一下平时获取页面中的数据是如何进行的，在 form 表单中通常会用 input 标签和 textarea 标签，简单的如登录信息的获取可能使用 input 标签即可，字数多一些的会用 textarea 标签来获取用户输入的内容，而博客文章排版比较丰富，各种内容和元素都会出现，此时就出现了问题，需要复杂排版的图文混合的内容或者更多内容录入的时候，这两个标签显然就无法满足需求，比如下面几个比较知名博客网站的文章详情：
- CSDN 文章详情
- 博客园文章详情
- 简书文章详情
像上面几种图文形式且排版良好的形式是 input 标签和 textarea 标签无法很完美去支持的，也因此出现了富文本编辑器的概念，像上面这几种文章详情页以及类似的淘宝或者京东的商品详情页都可以通过富文本编辑器制作出类似的效果，阅读文章或者新闻的时候，经常是这种图文并茂的内容才能更好的阅读者吸引眼球，而商品详情图页基本都是介绍信息加商品的实景图片才能更精准的吸引买家的目光和购买欲望。
什么是富文本编辑器？
富文本编辑器，是一种可内嵌于浏览器，所见即所得的文本编辑器。
富文本编辑器不同于文本编辑器(如 textarea 标签、input 标签)，也可以叫做图文编辑器，在富文本编辑器里可以编辑非常丰富的内容，如文字、图片、表情、代码……应有尽有，满足你的大部分需求。
像一些新闻排版，基本是以图文排版为主，而淘宝京东这些电商的商品详情页，基本都是多张已经排版好的设计图拼接而来的，富文本编辑器可以很完美的支持者两种需求。
目前的富文本编辑器主要有 markdown 版本和非 markdown 版本的编辑器，一般企业开发中使用非 markdown 版本比较多，常见的有 UEditor 和 KindEditor 等，因为运营人员可能不太懂 markdown 语法，而博客文章的编辑通常是使用 markdown 编辑器（即 md 编辑器），因为这部分人员掌握 markdown 语法也很快，所以大部分博客网站都会默认使用 markdown 编辑器作为用户的文章编辑器，比如咱们实验楼的编辑器也支持 markdown 语法。
为什么要使用富文本编辑器
以下是使用富文本编辑器的原因，也是富文本编辑器的优点：
- 需求变更导致，业务方提出的编辑需求越来越复杂
- 编辑的内容变得越来越复杂、越来越丰富
- 比起编辑 html，富文本编辑器更灵活
- 富文本编辑器功能丰富，满足大部分需求
Editor.md 编辑器介绍
本次实战项目中所选用的富文本编辑器为 Editor.md，这一节将会详细介绍它，即使通过让大家通过文章就可以感受到它的强大，Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
- 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
- 支持 ToC（Table of Contents）、Emoji 表情、Task lists、@链接等 Markdown 扩展语法；
- 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
- 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
- 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
Editor.md 主页
Editor.md in GitHub
Editor.md 编辑器的功能很多，那么在博客编辑时最常用的功能可以到它的主页去了解，官网上也有很多的实用案例可以让你快速上手，有的同学可能不太熟悉 markdown 语法，也可以针对性的去学习一下，这里由于篇幅所限就不再介绍了。
文章编辑页面制作
导航栏
首先在左侧导航栏中新增编辑页的导航按钮，在 sidebar.html 文件中新增如下代码：(注：完整代码位于 resources/template/admin/sidebar.html)
<li class="nav-item"> <a th:href="@{/admin/blogs/edit}" th:class="${path}=='edit'?'nav-link active':'nav-link'" > <i class="nav-icon fa fa fa-pencil-square-o"></i> <p> 发布博客 </p> </a> </li>点击后的跳转路径为 /admin/blogs/edit，之后我们新建 Controller 来处理该路径并跳转到对应的页面。
Controller 处理跳转
首先在 controller/admin 包下新建 BlogController.java，之后新增如下代码：(注：完整代码位于 com.site.blog.my.core.controller.admin.BlogController.java)
package com.site.blog.my.core.controller.admin; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletRequest; @Controller @RequestMapping("/admin") public class BlogController { @GetMapping("/blogs/edit") public String edit(HttpServletRequest request) { request.setAttribute("path", "edit"); return "admin/edit"; } }该方法用于处理 /admin/blogs/edit 请求，并设置 path 字段，之后跳转到 admin 目录下的 edit.html 中。
edit.html 页面制作
接下来就是博客编辑页面的模板文件制作了，在 resources/templates/admin 目录下新建 edit.html，并引入对应的 js 文件和 css 样式文件，代码如下：(注：完整代码位于 resources/templates/admin/edit.html)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <header th:replace="admin/header::header-fragment"></header> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- 引入页面头header-fragment --> <div th:replace="admin/header::header-nav"></div> <!-- 引入工具栏sidebar-fragment --> <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"></div> <!-- /.container-fluid --> </div> <!-- Main content --> <div class="content"> <div class="container-fluid"> <div class="card card-primary card-outline"> <div class="card-header"> <h3 class="card-title">发布文章</h3> </div> <div class="card-body"> 编辑页面 </div> </div> </div> <!-- /.container-fluid --> </div> </div> <!-- /.content-wrapper --> <!-- 引入页脚footer-fragment --> <div th:replace="admin/footer::footer-fragment"></div> </div> <!-- jQuery --> <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script> <!-- jQuery UI 1.11.4 --> <script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script> <!-- Bootstrap 4 --> <script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}" ></script> </body> </html>至此，跳转逻辑处理完毕，演示效果如下：
Spring Boot 博客系统项目开发之文章编辑模块功能实现
本项目的开源仓库地址为：https://github.com/ZHENFENG13/My-Blog
除 My-Blog 项目外，我也在维护另外一个开源项目，仓库地址为：https://github.com/newbee-ltd/newbee-mall
感兴趣的朋友可以去关注一下。
文章总览
本实验开始讲解文章模块的相关功能，该实验主要讲解文章编辑页面的相关实现以及插件整合，首先介绍目前主要的博客网站中文章布局的介绍，之后会介绍富文本编辑器的概念以及目前在博客文章中主要使用的 md 编辑器接介绍，最后是整合我们本次项目中使用的 Editor.md 编辑器以及相关功能的完善。
知识点
- 认识富文本编辑器
- 文章编辑页面制作
- Editor.md 编辑器介绍及整合
- Editor.md 编辑器图片上传功能完善
环境
- JDK 1.8 或者更高版本
- Spring Boot 2.1.0-RELEASE
- Maven 3+
富文本编辑器
富文本编辑器
在介绍富文本编辑器的概念之前，首先来谈一下平时获取页面中的数据是如何进行的，在 form 表单中通常会用 input 标签和 textarea 标签，简单的如登录信息的获取可能使用 input 标签即可，字数多一些的会用 textarea 标签来获取用户输入的内容，而博客文章排版比较丰富，各种内容和元素都会出现，此时就出现了问题，需要复杂排版的图文混合的内容或者更多内容录入的时候，这两个标签显然就无法满足需求，比如下面几个比较知名博客网站的文章详情：
- CSDN 文章详情
- 博客园文章详情
- 简书文章详情
像上面几种图文形式且排版良好的形式是 input 标签和 textarea 标签无法很完美去支持的，也因此出现了富文本编辑器的概念，像上面这几种文章详情页以及类似的淘宝或者京东的商品详情页都可以通过富文本编辑器制作出类似的效果，阅读文章或者新闻的时候，经常是这种图文并茂的内容才能更好的阅读者吸引眼球，而商品详情图页基本都是介绍信息加商品的实景图片才能更精准的吸引买家的目光和购买欲望。
什么是富文本编辑器？
富文本编辑器，是一种可内嵌于浏览器，所见即所得的文本编辑器。
富文本编辑器不同于文本编辑器(如 textarea 标签、input 标签)，也可以叫做图文编辑器，在富文本编辑器里可以编辑非常丰富的内容，如文字、图片、表情、代码……应有尽有，满足你的大部分需求。
像一些新闻排版，基本是以图文排版为主，而淘宝京东这些电商的商品详情页，基本都是多张已经排版好的设计图拼接而来的，富文本编辑器可以很完美的支持者两种需求。
目前的富文本编辑器主要有 markdown 版本和非 markdown 版本的编辑器，一般企业开发中使用非 markdown 版本比较多，常见的有 UEditor 和 KindEditor 等，因为运营人员可能不太懂 markdown 语法，而博客文章的编辑通常是使用 markdown 编辑器（即 md 编辑器），因为这部分人员掌握 markdown 语法也很快，所以大部分博客网站都会默认使用 markdown 编辑器作为用户的文章编辑器，比如咱们实验楼的编辑器也支持 markdown 语法。
为什么要使用富文本编辑器
以下是使用富文本编辑器的原因，也是富文本编辑器的优点：
- 需求变更导致，业务方提出的编辑需求越来越复杂
- 编辑的内容变得越来越复杂、越来越丰富
- 比起编辑 html，富文本编辑器更灵活
- 富文本编辑器功能丰富，满足大部分需求
Editor.md 编辑器介绍
本次实战项目中所选用的富文本编辑器为 Editor.md，这一节将会详细介绍它，即使通过让大家通过文章就可以感受到它的强大，Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
- 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
- 支持 ToC（Table of Contents）、Emoji 表情、Task lists、@链接等 Markdown 扩展语法；
- 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
- 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
- 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
Editor.md 主页
Editor.md in GitHub
Editor.md 编辑器的功能很多，那么在博客编辑时最常用的功能可以到它的主页去了解，官网上也有很多的实用案例可以让你快速上手，有的同学可能不太熟悉 markdown 语法，也可以针对性的去学习一下，这里由于篇幅所限就不再介绍了。
文章编辑页面制作
导航栏
首先在左侧导航栏中新增编辑页的导航按钮，在 sidebar.html 文件中新增如下代码：(注：完整代码位于 resources/template/admin/sidebar.html)
<li class="nav-item"> <a th:href="@{/admin/blogs/edit}" th:class="${path}=='edit'?'nav-link active':'nav-link'" > <i class="nav-icon fa fa fa-pencil-square-o"></i> <p> 发布博客 </p> </a> </li>点击后的跳转路径为 /admin/blogs/edit，之后我们新建 Controller 来处理该路径并跳转到对应的页面。
Controller 处理跳转
首先在 controller/admin 包下新建 BlogController.java，之后新增如下代码：(注：完整代码位于 com.site.blog.my.core.controller.admin.BlogController.java)
package com.site.blog.my.core.controller.admin; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletRequest; @Controller @RequestMapping("/admin") public class BlogController { @GetMapping("/blogs/edit") public String edit(HttpServletRequest request) { request.setAttribute("path", "edit"); return "admin/edit"; } }该方法用于处理 /admin/blogs/edit 请求，并设置 path 字段，之后跳转到 admin 目录下的 edit.html 中。
edit.html 页面制作
接下来就是博客编辑页面的模板文件制作了，在 resources/templates/admin 目录下新建 edit.html，并引入对应的 js 文件和 css 样式文件，代码如下：(注：完整代码位于 resources/templates/admin/edit.html)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <header th:replace="admin/header::header-fragment"></header> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- 引入页面头header-fragment --> <div th:replace="admin/header::header-nav"></div> <!-- 引入工具栏sidebar-fragment --> <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"></div> <!-- /.container-fluid --> </div> <!-- Main content --> <div class="content"> <div class="container-fluid"> <div class="card card-primary card-outline"> <div class="card-header"> <h3 class="card-title">发布文章</h3> </div> <div class="card-body"> 编辑页面 </div> </div> </div> <!-- /.container-fluid --> </div> </div> <!-- /.content-wrapper --> <!-- 引入页脚footer-fragment --> <div th:replace="admin/footer::footer-fragment"></div> </div> <!-- jQuery --> <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script> <!-- jQuery UI 1.11.4 --> <script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script> <!-- Bootstrap 4 --> <script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}" ></script> </body> </html>至此，跳转逻辑处理完毕，演示效果如下：
Spring Boot 博客系统项目开发之文章编辑模块功能实现
本项目的开源仓库地址为：https://github.com/ZHENFENG13/My-Blog
除 My-Blog 项目外，我也在维护另外一个开源项目，仓库地址为：https://github.com/newbee-ltd/newbee-mall
感兴趣的朋友可以去关注一下。
文章总览
本实验开始讲解文章模块的相关功能，该实验主要讲解文章编辑页面的相关实现以及插件整合，首先介绍目前主要的博客网站中文章布局的介绍，之后会介绍富文本编辑器的概念以及目前在博客文章中主要使用的 md 编辑器接介绍，最后是整合我们本次项目中使用的 Editor.md 编辑器以及相关功能的完善。
知识点
- 认识富文本编辑器
- 文章编辑页面制作
- Editor.md 编辑器介绍及整合
- Editor.md 编辑器图片上传功能完善
环境
- JDK 1.8 或者更高版本
- Spring Boot 2.1.0-RELEASE
- Maven 3+
富文本编辑器
富文本编辑器
在介绍富文本编辑器的概念之前，首先来谈一下平时获取页面中的数据是如何进行的，在 form 表单中通常会用 input 标签和 textarea 标签，简单的如登录信息的获取可能使用 input 标签即可，字数多一些的会用 textarea 标签来获取用户输入的内容，而博客文章排版比较丰富，各种内容和元素都会出现，此时就出现了问题，需要复杂排版的图文混合的内容或者更多内容录入的时候，这两个标签显然就无法满足需求，比如下面几个比较知名博客网站的文章详情：
- CSDN 文章详情
- 博客园文章详情
- 简书文章详情
像上面几种图文形式且排版良好的形式是 input 标签和 textarea 标签无法很完美去支持的，也因此出现了富文本编辑器的概念，像上面这几种文章详情页以及类似的淘宝或者京东的商品详情页都可以通过富文本编辑器制作出类似的效果，阅读文章或者新闻的时候，经常是这种图文并茂的内容才能更好的阅读者吸引眼球，而商品详情图页基本都是介绍信息加商品的实景图片才能更精准的吸引买家的目光和购买欲望。
什么是富文本编辑器？
富文本编辑器，是一种可内嵌于浏览器，所见即所得的文本编辑器。
富文本编辑器不同于文本编辑器(如 textarea 标签、input 标签)，也可以叫做图文编辑器，在富文本编辑器里可以编辑非常丰富的内容，如文字、图片、表情、代码……应有尽有，满足你的大部分需求。
像一些新闻排版，基本是以图文排版为主，而淘宝京东这些电商的商品详情页，基本都是多张已经排版好的设计图拼接而来的，富文本编辑器可以很完美的支持者两种需求。
目前的富文本编辑器主要有 markdown 版本和非 markdown 版本的编辑器，一般企业开发中使用非 markdown 版本比较多，常见的有 UEditor 和 KindEditor 等，因为运营人员可能不太懂 markdown 语法，而博客文章的编辑通常是使用 markdown 编辑器（即 md 编辑器），因为这部分人员掌握 markdown 语法也很快，所以大部分博客网站都会默认使用 markdown 编辑器作为用户的文章编辑器，比如咱们实验楼的编辑器也支持 markdown 语法。
为什么要使用富文本编辑器
以下是使用富文本编辑器的原因，也是富文本编辑器的优点：
- 需求变更导致，业务方提出的编辑需求越来越复杂
- 编辑的内容变得越来越复杂、越来越丰富
- 比起编辑 html，富文本编辑器更灵活
- 富文本编辑器功能丰富，满足大部分需求
Editor.md 编辑器介绍
本次实战项目中所选用的富文本编辑器为 Editor.md，这一节将会详细介绍它，即使通过让大家通过文章就可以感受到它的强大，Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
- 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
- 支持 ToC（Table of Contents）、Emoji 表情、Task lists、@链接等 Markdown 扩展语法；
- 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
- 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
- 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
Editor.md 主页
Editor.md in GitHub
Editor.md 编辑器的功能很多，那么在博客编辑时最常用的功能可以到它的主页去了解，官网上也有很多的实用案例可以让你快速上手，有的同学可能不太熟悉 markdown 语法，也可以针对性的去学习一下，这里由于篇幅所限就不再介绍了。
文章编辑页面制作
导航栏
首先在左侧导航栏中新增编辑页的导航按钮，在 sidebar.html 文件中新增如下代码：(注：完整代码位于 resources/template/admin/sidebar.html)
<li class="nav-item"> <a th:href="@{/admin/blogs/edit}" th:class="${path}=='edit'?'nav-link active':'nav-link'" > <i class="nav-icon fa fa fa-pencil-square-o"></i> <p> 发布博客 </p> </a> </li>点击后的跳转路径为 /admin/blogs/edit，之后我们新建 Controller 来处理该路径并跳转到对应的页面。
Controller 处理跳转
首先在 controller/admin 包下新建 BlogController.java，之后新增如下代码：(注：完整代码位于 com.site.blog.my.core.controller.admin.BlogController.java)
package com.site.blog.my.core.controller.admin; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletRequest; @Controller @RequestMapping("/admin") public class BlogController { @GetMapping("/blogs/edit") public String edit(HttpServletRequest request) { request.setAttribute("path", "edit"); return "admin/edit"; } }该方法用于处理 /admin/blogs/edit 请求，并设置 path 字段，之后跳转到 admin 目录下的 edit.html 中。
edit.html 页面制作
接下来就是博客编辑页面的模板文件制作了，在 resources/templates/admin 目录下新建 edit.html，并引入对应的 js 文件和 css 样式文件，代码如下：(注：完整代码位于 resources/templates/admin/edit.html)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <header th:replace="admin/header::header-fragment"></header> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- 引入页面头header-fragment --> <div th:replace="admin/header::header-nav"></div> <!-- 引入工具栏sidebar-fragment --> <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"></div> <!-- /.container-fluid --> </div> <!-- Main content --> <div class="content"> <div class="container-fluid"> <div class="card card-primary card-outline"> <div class="card-header"> <h3 class="card-title">发布文章</h3> </div> <div class="card-body"> 编辑页面 </div> </div> </div> <!-- /.container-fluid --> </div> </div> <!-- /.content-wrapper --> <!-- 引入页脚footer-fragment --> <div th:replace="admin/footer::footer-fragment"></div> </div> <!-- jQuery --> <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script> <!-- jQuery UI 1.11.4 --> <script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script> <!-- Bootstrap 4 --> <script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}" ></script> </body> </html>至此，跳转逻辑处理完毕，演示效果如下：
部分转自互联网，侵权删除联系
最新评论