个人博客项目之editormd实现文章详情页面预览

比眉伴天荒 2021-09-18 00:52 356阅读 0赞

继之前博客写了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提供的第三方库脚本:

前端的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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210812/afdaa594873343fd84e7de5e04b643d2.png