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 decode
            emoji           : 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
@Override
    public 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 decode
                emoji           : 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";
    }