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

继之前博客写了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 decodeemoji           : true,taskList        : true,tex             : true,  // 默认不解析flowChart       : true,  // 默认不解析sequenceDiagram : true,  // 默认不解析});});
</script>
<%@ include file="../frame/footer.jsp" %>
</body>
</html>

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

Django 快速搭建博客第七节（文章详情页，markdown语法）
版权声明: 更多最新原创文章请访问:最新原创主页更多最全原创文章请访问:更多原创主页上一节我们把真正的index.html显示出来了,只是一个摘要,接下来我们要做的是当我们点击标题或者继续阅读的时 ...
最新后盾网Laravel框架重入门到实战 Laravel博客项目实战陈华主讲包含课件源码
老师介绍陈华,PHP明星讲师,大学生演讲网创始人,2010年开始开发整站项目,精通Laravel,Yii框架. 简介本套课程是一套以项目实战为主的Laravel5.2实战开发教程,是真正意义上的 ...
python搭建博客项目思路_Django项目——Blog简易开发入门
一.模型层模型层是什么位于视图与数据库之间 pytho对象与数据库表的转换为什么需要模型层屏蔽不同数据库之间的差异开发者更加专注于业务逻辑的开发提供多种便捷的工具有利于开发工作模型层的配 ...
实战react技术栈+express前后端博客项目（8）-- 前端管理界面标签管理+后端对应接口开发...
项目地址:https://github.com/Nealyang/R... 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢 ...
实战react技术栈+express前后端博客项目（3）-- 后端路由、代理以及静态资源托管等配置说明...
项目地址:github.com/Nealyang/Re- 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢.分享当然是好的, ...
django博客项目8：文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
Spring Boot + vue-element 开发个人博客项目实战教程（十三、文章标签功能实现）
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统项目部署视频 https://www.bi ...
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(九) 转载于:https://github.com/Meowv/Blog 终于要接近尾声了,上一篇基本上将文 ...
博客项目- SSM 实现
文章目录 1. 创建项目 2. 数据库设计 3. 前置任务 3.1 拦截器 3.2 统一数据格式 3.3 创建一个 Constant 3.4 统一异常处理 3.5 密码加密 4. 功能实现 4.1 登 ...
Django之BBS博客项目
一.登陆功能(验证码) 1 from geetest importGeetestLib2 from django.contrib importauth3 4 #使用极验滑动验证码的登陆 5 deflo ...

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

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

最新文章

热门文章