editormd實現文章詳情頁面預覽
阿新 • • 發佈：2019-02-09
rom jsp頁面 info min sco footer .com prettify 參考
繼之前博客寫了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實現文章詳情頁面預覽