个人博客项目之editormd实现文章详情页面预览
【摘要】 继之前博客写了editmd.js（国内开源的一款前端Markdown框架）实现的写文章功能之后，本博客介绍使用editormd实现文章预览功能，之前博客链接：https://blog.csdn.net/u014427391/article/details/86378811
要从上篇博客介绍的将Markdown语法的语句存储在数据库之后，读取出来，然后调用editorm...
继之前博客写了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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
Service类：
/**
* 获取文章详情信息
* @param articleId
* @return
*/
public Article getArticleInfo(int articleId) {
return articleRepository.getArticleInfo(articleId);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
前端的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。
原文链接：smilenicky.blog.csdn.net/article/details/86815407
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）