SpringBoot集成editormd实现发表和查阅功能

1、首先下载editormd,导入一些文件

2、在HTML中引入css和js文件，以及使用方法

<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}"><!--放置内容显示-->
<div class="required field"><div id="md-content" style="z-index: 1 !important;"><textarea name="content" style="display:none;">###HelloWorld</textarea></div></div><script src="../static/lib/editormd/plugins/emoji-dialog/emoji-dialog.js" th:src="@{/lib/editormd/plugins/emoji-dialog/emoji-dialog.js}"></script>
<!--背景-->
<script type="text/javascript" color="0,204,204" opacity='0.9' zIndex="-2" count="120" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<script type="text/javascript">/*初始化markdown编辑器*/let contentEditor;$(function () {contentEditor = editormd("md-content", {width: "100%",height: 640,syncScrolling: "single",path: "/lib/editormd/lib/",htmlDecode      : "style,script,iframe",  // you can filter tags decodeemoji           : true,taskList        : true,tex             : true,  // 默认不解析flowChart       : true,  // 默认不解析sequenceDiagram : true,  // 默认不解析});});

3、效果

4、对应的后台代码实现

//Mapper
int addDiscussPost(DiscussPost discussPost);<insert id="addDiscussPost" parameterType="DiscussPost">insert into discuss_post(<include refid="insertFileds"></include>)values (#{userId}, #{typeId}, #{title}, #{content}, #{type}, #{status}, #{createTime}, #{commentCount}, #{score})</insert>

//Service
@Overridepublic int addDiscussPost(DiscussPost discussPost) {if (discussPost == null) {throw new IllegalArgumentException("参数不能为空");}discussPost.setTitle(HtmlUtils.htmlEscape(discussPost.getTitle()));discussPost.setContent(HtmlUtils.htmlEscape(discussPost.getContent()));discussPost.setCreateTime(new Date());discussPost.setType(0);discussPost.setStatus(0);discussPost.setCommentCount(0);discussPost.setScore(0.0);return discussPostMapper.addDiscussPost(discussPost);}

//Controller
/*发布帖子*/@PostMapping("/discuss-input")public String discussInput(DiscussPost discussPost, HttpSession session, Model model, Page page) {//获取帖子列表信息int rows = discussPostService.queryDiscussPostsRows(0);page.setRows(rows);page.setPath("/index");List<DiscussPost> list = discussPostService.queryDiscussPosts(0, page.getOffset(), page.getLimit());List<Map<String, Object>> discussPosts = new ArrayList<>();if (list != null) {for (DiscussPost post : list) {Map<String, Object> map = new HashMap<>();map.put("post", post);User user = userService.queryById(post.getUserId());map.put("user", user);Type type = typeService.queryTypeById(post.getTypeId());map.put("type", type);discussPosts.add(map);}}model.addAttribute("rows", rows);model.addAttribute("discussPosts", discussPosts);/*发布帖子*/User user = (User) session.getAttribute("user");discussPost.setUserId(user.getId());discussPostService.addDiscussPost(discussPost);return "redirect:/index";}

5、详情界面

<!--editormd--><link rel="stylesheet" href="../static/lib/editormd/css/editormd.preview.css" th:href="@{/lib/editormd/css/editormd.preview.css}" /><!--帖子内容--><div class="m-text ui attached padded segment"><div class="typo typo-selection"><div id="test-editormd-view"><textarea id="append-test" style="display:none;">[[${post.content}]]</textarea></div></div></div>
<!--editormd--><script src="../static/lib/editormd/lib/marked.min.js" th:src="@{/lib/editormd/lib/marked.min.js}"></script><script src="../static/lib/editormd/lib/prettify.min.js" th:src="@{/lib/editormd/lib/prettify.min.js}"></script><script src="../static/lib/editormd/lib/raphael.min.js" th:src="@{/lib/editormd/lib/raphael.min.js}"></script><script src="../static/lib/editormd/lib/underscore.min.js" th:src="@{/lib/editormd/lib/underscore.min.js}"></script><script src="../static/lib/editormd/lib/sequence-diagram.min.js" th:src="@{/lib/editormd/lib/sequence-diagram.min.js}"></script><script src="../static/lib/editormd/lib/flowchart.min.js" th:src="@{/lib/editormd/lib/flowchart.min.js}"></script><script src="../static/lib/editormd/lib/jquery.flowchart.min.js" th:src="@{/lib/editormd/lib/jquery.flowchart.min.js}"></script><script src="../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script><script type="text/javascript">/*editormd*/$(function () {editormd.markdownToHTML("test-editormd-view", {htmlDecode      : "style,script,iframe",  // you can filter tags decodeemoji           : true,taskList        : true,tex             : true,  // 默认不解析flowChart       : true,  // 默认不解析sequenceDiagram : true,  // 默认不解析});})</script>

6、效果展示

7、后台代码实现

<a th:href="@{|/discuss/detail/${map.post.id}|}" class="ui header" th:utext="${map.post.title}">SpringBoot你知道吗？</a>
/*Controller*/@GetMapping("/detail/{discussPostId}")public String getDiscussPost(@PathVariable("discussPostId") int discussPostId, Model model) {//帖子DiscussPost post = discussPostService.queryDiscussPostById(discussPostId);model.addAttribute("post", post);//作者User user = userService.queryById(post.getUserId());model.addAttribute("user", user);return "/discuss/discuss-detail";}

SpringBoot集成editormd实现发表和查阅功能相关推荐

SpringBoot集成WebSocket实现及时通讯聊天功能!!!
1:在SpringBoot的pom.xml文件里添加依赖:  <dependency><groupId>org.springfr ...
SpringBoot 集成FluentMyBatis 框架之集成分页功能
本文基于上一篇:SpringBoot 集成FluentMyBatis 框架之完善 SpringBoot 集成FluentMyBatis 框架之集成分页功能 FluentMyBatis 官方分页官方提 ...
springboot集成阿里MNS消息队列发布订阅消息功能
声明: 上一篇文章是springboot集成阿里ons发布订阅消息,此篇文章是mns发布订阅功能先简单记录一下ons与mns有什么区别这里是在网上找的对比图: 此处为具体区别文章链接:点击打开链接 ...
SpringBoot集成邮箱功能并使用Knife4j测试
SpringBoot集成邮箱功能并使用Knife4j测试哔哩哔哩链接:https://www.bilibili.com/video/BV1uA411N7cm 1.获取163或QQ邮箱授权码 163邮 ...
Springboot集成社交登录功能（微博登录）以及Session共享
Springboot集成社交登录功能 pom <dependency><groupId>org.apache.httpcomponents</groupId>< ...
springboot集成Elasticsearch实现各种搜索功能
springboot集成Elasticsearch各类搜索功能实现 springboot集成Elasticsearch使用completion suggest实现自动关键字补全建立学生的索引和映射: ...
SpringBoot集成MinIo实现资源库功能
项目背景要实现一个资源库的功能,实现图片.文件.视频等资源的上传和下载. 项目git地址,还没完全完成 https://github.com/zhumengting/resource-managem ...
springboot集成阿里云短信服务，实现发送短信功能
springboot集成阿里云短信服务,实现发送短信功能准备工作: 1.登陆阿里云->进入控制台->开通短信服务(进入后根据提示开通) 2.充值(借人家平台发短信你以为不要钱的?我充了3 ...
springboot集成elasticsearch，实现搜索提示补全功能
springboot集成elasticsearch,通过实体类创建索引,实现搜索提示补全功能文章目录 springboot集成elasticsearch,通过实体类创建索引,实现搜索提示补全功能一 ...
SpringBoot集成UEditor实现文本编辑功能增删查改发布等功能
SpringBoot集成UEditor实现文本编辑功能简介创建实体 DAO层 Controller层业务实现页面弹出框设置页面布局设置 js页面设置设置只显示六条记录点击事件的查看功能 p ...

SpringBoot集成editormd实现发表和查阅功能

1、首先下载editormd,导入一些文件

2、在HTML中引入css和js文件，以及使用方法

3、效果

4、对应的后台代码实现

5、详情界面

6、效果展示

7、后台代码实现

SpringBoot集成editormd实现发表和查阅功能相关推荐

最新文章

热门文章