editormd实现文章详情页面预览

来源：情诗网 2021-01-31 分类：情感文章

继之前博客写了editmd.js（国内开源的一款前端Markdown框架）实现的写文章功能之后，本博客介绍使用editormd实现文章预览功能，之前博客链接：https://blog.csdn.net/u014427391/article/details/86378811

要从上篇博客介绍的将Markdown语法的语句存储在数据库之后，读取出来，然后调用editormd的一些js脚本就可以实现

主要参考editormd提供的examples文件夹下面的html-preview-markdown-to-html.html

后台实现：
采用jpa实现

package net.myblog.repository;

import java.util.Date;
import java.util.List;

import net.myblog.entity.Article;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.data.repository.query.Param;

public interface ArticleRepository extends PagingAndSortingRepository<Article,Integer>{

    /**
     * 获取文章详情信息
     * @param articleId
     * @return
     */
    @Query("from Article a where a.articleId=:articleId")
    public Article getArticleInfo(@Param("articleId")int articleId);

Service类：

/**
     * 获取文章详情信息
     * @param articleId
     * @return
     */
    public Article getArticleInfo(int articleId) {
        return articleRepository.getArticleInfo(articleId);
    }

Controller类

/**
     * 博客详情页面
     * @return
     */
    @RequestMapping(value = "/details")
    public ModelAndView details(@RequestParam("articleId")String articleId) {
        ModelAndView mv = this.getModelAndView();
        Article article = articleService.getArticleInfo(Integer.parseInt(articleId));
        mv.addObject("article",article);
        mv.setViewName("myblog/article/article_details");
        return mv;
    }

jsp页面：
实现主要依赖于editormd.js提供的第三方库脚本:

<script src="plugins/editormd/lib/marked.min.js"></script>
<script src="plugins/editormd/lib/prettify.min.js"></script>

<script src="plugins/editormd/lib/raphael.min.js"></script>
<script src="plugins/editormd/lib/underscore.min.js"></script>
<script src="plugins/editormd/lib/sequence-diagram.min.js"></script>
<script src="plugins/editormd/lib/flowchart.min.js"></script>
<script src="plugins/editormd/lib/jquery.flowchart.min.js"></script>

<script src="plugins/editormd/editormd.js"></script>

前端的jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="<%=basePath %>">
    <title>Nicky's blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Keywords" content="" >
    <meta name="Description" content="" >
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="static/blog/css/blog.css" rel="stylesheet" />
    <link rel="stylesheet" href="plugins/editormd/css/editormd.preview.css" />
    <link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css' />
    <style>
        .editormd-html-preview {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<%@ include file="../frame/top.jsp" %>
<div class="blank"></div>
<div class="article">
    <div class="content" id="layer">
        <div id="test-editormd-view">
            <h2>${article.articleName}</h2>
                <textarea id="append-test" style="display:none;">${article.articleContent}</textarea>
        </div>
    </div>
</div>
<script src="static/js/jquery-1.8.3.js"></script>
<script src="plugins/editormd/lib/marked.min.js"></script>
<script src="plugins/editormd/lib/prettify.min.js"></script>

<script src="plugins/editormd/lib/raphael.min.js"></script>
<script src="plugins/editormd/lib/underscore.min.js"></script>
<script src="plugins/editormd/lib/sequence-diagram.min.js"></script>
<script src="plugins/editormd/lib/flowchart.min.js"></script>
<script src="plugins/editormd/lib/jquery.flowchart.min.js"></script>

<script src="plugins/editormd/editormd.js"></script>
<script type="text/javascript">
    $(function() {
        var testEditormdView;
        /*$.get("test.md", function(markdown) {

            testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
                //toc             : false,
                tocm            : true,    // Using [TOCM]
                //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                //gfm             : false,
                //tocDropdown     : true,
                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                emoji           : true,
                taskList        : true,
                tex             : true,  // 默认不解析
                flowChart       : true,  // 默认不解析
                sequenceDiagram : true,  // 默认不解析
            });

            //console.log("返回一个 jQuery 实例 =>", testEditormdView);

            // 获取Markdown源码
            //console.log(testEditormdView.getMarkdown());

            //alert(testEditormdView.getMarkdown());
        });*/
        testEditormdView = 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>
<%@ include file="../frame/footer.jsp" %>
</body>
</html>

在这里插入图片描述

editormd实现文章详情页面预览

热门文章