继之前博客写了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>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/17045.html