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

2022-05-07 16:43:11 浏览数 (1)

继之前博客写了editmd.js（国内开源的一款前端Markdown框架）实现的写文章功能之后，本博客介绍使用editormd实现文章预览功能，之前博客链接：https://cloud.tencent.com/developer/article/1384197

要从上篇博客介绍的将Markdown语法的语句存储在数据库之后，读取出来，然后调用editormd的一些js脚本就可以实现

主要参考editormd提供的examples文件夹下面的html-preview-markdown-to-html.html

后台实现：

采用jpa实现

代码语言：javascript复制
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类：

代码语言：javascript复制
/**
	 * 获取文章详情信息
	 * @param articleId
	 * @return
	 */
	public Article getArticleInfo(int articleId) {
		return articleRepository.getArticleInfo(articleId);
	}

Controller类

代码语言：javascript复制
/**
     * 博客详情页面
     * @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提供的第三方库脚本:

代码语言：javascript复制
<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页面：

代码语言：javascript复制
<%@ 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 ,//  "rn"   $("#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>
html markdown jsp java javascript

0 人点赞