个人博客项目之editormd实现文章详情页面预览 比眉伴天荒 2021-09-18 00:52 273阅读 0赞 继之前博客写了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> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210812/afdaa594873343fd84e7de5e04b643d2.png
还没有评论,来说两句吧...