发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor、editor.md等。这里守望博客里面是集成的editor.md,因为editor.md是markdown格式,目前markdown由于简洁好用,在各种云笔记、github等中得到了广泛使用。

1、集成editor.md

editor.md是在github上开源,开源地址为:https://github.com/pandao/editor.md,下载其发布的最新版本,即:

解压后,将相应的文章添加到系统中,即:

将这些docs、examples、tests文件夹是删除了的,因为这些文件夹里面的文件是不需要用到的。

页面中需要引用的文件如下:

<link href="${rc.contextPath}/static/plugins/editor/css/editormd.min.css" rel="stylesheet">
<script src="${rc.contextPath}/static/plugins/editor/editormd.min.js" type="text/javascript"></script>

页面中只需要引入editor.md中的editormd.min.css和editormd.min.js文件(注意:对于jquery相关的引用是提前就引用好的)。

页面中需要插入富文本编辑器的地方代码如下:

<div class="form-group">
<div class="col-sm-12" id="article-editormd">
<textarea style="display:none;"></textarea>
</div>
</div>

注意标签中有一个id值为article-editormd,后面初始化富文本编辑器时,需要用到。

初始化富文本编辑器的代码如下:

var editor;
$(function () {
editor = editormd("article-editormd", {
width: "100%",
height: 640,
placeholder: '',
syncScrolling: "single",
path: "${rc.contextPath}/static/plugins/editor/lib/",
saveHTMLToTextarea: true,
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
imageUploadURL: "${rc.contextPath}/upload?_distType=_articleImg",
imageUploadFileName: "_uploadFile",
toolbarIcons: "sw"
});
});

注意:

  • 其中imageUploadFileName参数名,是我扩展的,原生的editor.md是没有这个参数的。扩展这个参数的原因是因为editor.md中对于上传图片的文件名为editormd-image-file,由于守望博客中对于上传模块进行统一抽象,即上传名称统一为_uploadFile,为此就扩展了这个参数进行修改上传图片的文件名。

  • 对于toolbarIcons参数的参数值,也是我扩展的,因为原生的editor.md工具栏的种类只有3种,即:full、simple、mini。这样导致工具栏要么太多了,要么太少了,所以就再定义一个sw,里面工具就是自己想要的工具,即:

    sw : [
    "undo", "redo", "|",
    "bold", "del", "italic", "quote", "|",
    "h1", "h2", "h3", "h4", "h5", "h6", "|",
    "list-ul", "list-ol", "hr", "|",
    "link", "image", "code", "preformatted-text", "code-block", "table", "html-entities", "|",
    "watch", "preview", "clear", "search"
    ]

最终富文本编辑器页面效果如下:

2、开发布文章功能

处理文章图片的UploadGroupLogoHandler,内容为:

/**
* 上传专栏Logo处理类
*
* @author lzj
* @since 1.0
* @date [2019-07-23]
*/
@Slf4j
@Component("_groupLogo")
public class UploadGroupLogoHandler implements IUploadHandler { @Resource(name = "configCache")
private ICache<Config> configCache; @Override
public Object upload(MultipartFile file, String distType, String userId) throws Exception {
Map<String, Object> result = new HashMap<String, Object>();
try {
// 获取图片的原始名称
String originalName = file.getOriginalFilename(); // 判断图片的类型
if (!(originalName.endsWith(".jpg") || originalName.endsWith(".JPG") || originalName.endsWith(".png") || originalName.endsWith(".PNG") || originalName.endsWith(".gif") || originalName.endsWith(".GIF") || originalName.endsWith(".jpeg") || originalName.endsWith(".JPEG"))) {
throw new TipException("您上传的图片类型有误,请上传格式为jpg、png或gif");
} // 获取图片的大小
long fileSize = file.getSize(); // 图片大小不能超过2M, 2M = 2 * 1024 * 1024B = 2097152B
if (fileSize > 2097152L) {
throw new TipException("您上传的图片超过2M");
} Config config = configCache.get(Config.CONFIG_IMG_GROUP_LOGO_PATH);
// 保存头像的根目录
String basePath = config.getConfigValue();
if (!(basePath.endsWith("/") || basePath.endsWith("\\"))) {
basePath += "/";
} // 根据当前时间构建yyyyMM的文件夹,建立到月的文件夹
String dateDirName = DateUtil.date2Str(new Date(), DateUtil.YEAR_MONTH_FORMAT);
basePath += dateDirName; File imageDir = new File(basePath);
if (!imageDir.exists()) {
imageDir.mkdirs();
} String fileNewName = IdGenarator.guid() + originalName.substring(originalName.lastIndexOf("."));
FileUtil.copy(file.getInputStream(), new FileOutputStream(new File(imageDir, fileNewName))); result.put("url", dateDirName + "/" + fileNewName);
result.put("msg", "上传成功");
} catch (TipException e) {
result.put("url", "");
result.put("msg", e.getMessage());
} catch (Exception e) {
log.error("上传失败", e);
result.put("url", "");
result.put("msg", "上传失败");
}
return result;
} @Override
public void download(String fileId, HttpServletResponse response) throws Exception {
} @Override
public Object list(String distType, String userId) throws Exception {
return null;
}
}

加载出发布文章页面核心代码为:

/**
* 加载出新增文章页面
*
* @param model
* @param request
* @param session
* @return
*/
@RequestMapping(value = "/user/article/add", method = RequestMethod.GET)
public String add(Model model, HttpServletRequest request, HttpSession session) {
// 获取登录信息
User tempUser = (User) session.getAttribute(Const.SESSION_USER);
String userId = tempUser.getUserId(); // 获取用户信息
User user = userService.getById(userId); // 构建专栏的查询条件
Map<String, Object> params = new HashMap<String, Object>();
params.put("creator", user.getUserId());
params.put("status", Group.STATUS_SUCCESS); List<Group> groups = groupService.list(new QueryWrapper<Group>().allEq(params).orderByDesc("createTime")); model.addAttribute("user", user);
model.addAttribute("groups", groups);
return Const.BASE_INDEX_PAGE + "blog/article/add";
}

处理发布文章的核心代码为:

/**
* 新增文章
*
* @param request
* @param session
* @return
*/
@RequestMapping(value = "/user/article/add", method = RequestMethod.POST)
@ResponseBody
public Result add(HttpServletRequest request, HttpSession session) {
Result result = new Result();
try {
// 接收参数
String groupId = request.getParameter("groupId");
String title = request.getParameter("title");
String content = request.getParameter("content");
String tag = request.getParameter("tag");
String description = request.getParameter("description");
String typeStr = request.getParameter("type");
String canTopStr = request.getParameter("canTop");
String canCommentStr = request.getParameter("canComment"); // 校验参数
if (StringUtils.isEmpty(title) || StringUtils.isEmpty(content) || StringUtils.isEmpty(description)) {
throw new TipException("缺少必要参数");
} int type = 0;
int canTop = 0;
int canComment = 1;
try {
type = Integer.parseInt(typeStr);
canTop = Integer.parseInt(canTopStr);
canComment = Integer.parseInt(canCommentStr);
} catch (Exception e) {
throw new TipException("参数类型错误");
} // 去html相关标签
description = StringUtil.replaceHtmlTags(description); // 客户端ip
String ip = HttpUtil.getIpAddr(request); // 获取session中的用户信息
User tempUser = (User) session.getAttribute(Const.SESSION_USER);
String userId = tempUser.getUserId(); // 封装文章信息
Article article = new Article();
article.setArticleId(IdGenarator.guid());
article.setGroupId(groupId);
article.setTitle(title);
article.setContent(content);
article.setDescription(description);
article.setType(type);
article.setCanTop(canTop);
article.setCanComment(canComment);
article.setViewCount(0L);
article.setGoodNum(0L);
article.setBadNum(0L);
article.setCreateTime(new Date());
article.setCreateIp(ip);
article.setUserId(userId); // 保存文章
articleService.create(article, tag); result.setCode(Result.CODE_SUCCESS);
result.setMsg("发布文章成功");
} catch (TipException e) {
result.setCode(Result.CODE_EXCEPTION);
result.setMsg(e.getMessage());
} catch (Exception e) {
log.error("新增文章失败", e);
result.setCode(Result.CODE_EXCEPTION);
result.setMsg("新增文章失败");
}
return result;
}

完整的发布文章页面如下:

关注我

以你最方便的方式关注我:

微信公众号:

基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能的更多相关文章

  1. 基于SpringBoot从零构建博客网站 - 整合ehcache和开发注册登录功能

    对于程序中一些字典信息.配置信息应该在程序启动时加载到缓存中,用时先到缓存中取,如果没有命中,再到数据库中获取同时放到缓存中,这样做可以减轻数据库层的压力.目前暂时先整合ehcache缓存,同时预留了 ...

  2. 基于SpringBoot从零构建博客网站 - 确定需求和表结构

    要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...

  3. 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境

    技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...

  4. 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能

    守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...

  5. 基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能

    上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片.pdf.压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等.在守望博客系统中对于上 ...

  6. 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能

    由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...

  7. 基于SpringBoot从零构建博客网站 - 开发文章详情页面

    文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...

  8. 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率

    在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...

  9. 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

随机推荐

  1. K-近邻算法介绍与代码实现

    声明:如需转载请先联系我. 最近学习了k近邻算法,在这里进行了总结. KNN介绍 k近邻法(k-nearest neighbors)是由Cover和Hart于1968年提出的,它是懒惰学习(lazy ...

  2. Web Scraper 翻页——控制链接批量抓取数据

    ![](https://image-1255652541.cos.ap-shanghai.myqcloud.com/images/20190708214014.png) 这是简易数据分析系列的第 5 ...

  3. C++ hdu 例题:不要62 题解

    例题:不要62 同步数位DP 需要统计区间[l,r]的满足题意的数的个数,这往往可以转换成求[0,r]-[0,l) 基本思想与方法 有了上述性质,我们就可以从高到低枚举第一次<n对应位是哪一位. ...

  4. 双端队列 duque

    一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...

  5. elasticsearch 集群部署,版本 5.5.0

    准备说明: 两台服务器 Ip分别为 192.168.239.78(主),192.168.239.49(从) 主服务器上配置如下:1.上传es5.5.0版本至主服务器2.解压 unzipunzip el ...

  6. springcloud高可用方案

    1. 场景描述 公司在规划后续可能会做中台服务,考虑用微服务的方案,让用springcloud部署个简单的高可用Demo. 2. 解决方案 2.1 方案说明 demo用了5台虚拟机: (1)1台gat ...

  7. Ubuntu系统安装QQ等软件

    1.安装deepin-wine环境:上https://github.com/wszqkzqk/deepin-wine-for-ubuntu页面下载zip包(或用git方式克隆),解压到本地文件夹,在文 ...

  8. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  9. Spark-windows安装

    Spark 目的:达到能在pycharm中测试 1.安装必要的文件: JDK AnaConda spark hadoop jdk测试:java -version Anaconda测试: 打开Anaco ...

  10. C语言入门9-1-分类函数

    分类函数 ASCII字符可以分为英文字母.数字.控制字符.空白字符.大小写字母以及标点符号,分类是指对字符进行属性判定,判断字符属于哪些范畴,这些属性的判定在程序中非常常见,尤其是通信协议的字符处理部 ...