個人部落格項目之editormd實作文章詳情頁面預覽

繼之前部落格寫了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>

複制