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

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

阅读量：2040 次

发布时间：2019-04-28

本文共 2206 字，大约阅读时间需要 7 分钟。

继之前博客写了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
   
    {	/**	 * 获取文章详情信息	 * @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提供的第三方库脚本:

前端的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+"/";%>		Nicky's blog	
   	
   	
   	
   	
   	
   	
   	
   	<%@ include file="../frame/top.jsp" %>
   
   	
    		
     			
      ${article.articleName}
                
      ${article.articleContent}		
     
	
    
   
<%@ include file="../frame/footer.jsp" %>