继之前博客写了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>

editormd实现文章详情页面预览的更多相关文章

  1. 基于SpringBoot从零构建博客网站 - 开发文章详情页面

    文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...

  2. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_13-课程预览功能开发-CMS页面预览接口测试

    5.2 CMS页面预览测试 CMS已经提供了页面预览功能,课程预览功能要使用CMS页面预览接口实现,下边通过cms页面预览接口测试课 程预览的效果. 1.向cms_page表插入一条页面记录或者从cm ...

  3. 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  4. 微信小程序（七）文章详情页面动态显示

    文章详情页面动态显示(即点击某个文章就跳转到相应文章的详情页): 思路:在文章列表页面添加catchtop事件,在js文件中获取文章的index,并用wx.navigateTo中的 url拼接详情页的 ...

  5. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试

    通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度

  6. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_23-页面预览-页面预览开发

    1.用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接. 2.cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型. 3.cms根据页面id查询页面模板内容 4.c ...

  7. UploadFile控件，提交图片后，页面预览显示刚刚提交的图片

    最近在用asp.net来写一个新闻系统后台,然后由于不用用网上的flash插件来上传图片什么的,我就用asp.net的控件来写,但是控件总归有一些用的不够灵活的地方.这次测试提出,文章在修改的时候,需 ...

  8. Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  9. HTML页面预览表格文件内容

    背景简介 在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中 vue项目 第三方 exceljs 安装 npm install exceljs 插件使用 github 中文文 ...

随机推荐

  1. python AES加密 ECB PKCS5

    class AesEbc16:  # 按块的大小, 一块一块的加密, 明文和密文长度一样 def __init__(self): self.key = b"123qweqqqwerqwer& ...

  2. JS学习记录------JS基本指令

    对未来的恐慌,和想成为一名自由开发的梦想.让我觉得应该点亮一个新的技能:WEB前端开发. 重新学习JS以及jQuery,让我在日常code的过程中可以更得心应手,毕竟,我爱代码. 这篇文章主要记录的内 ...

  3. 4，postman和newman的联合使用

    1:下载安装node.js http://nodejs.cn/ 出现版本号证明安装node.js成功 2:安装newman npm install -g newman --registry=https ...

  4. Callable Future接口的设计原理

    我们都知道Callable接口作为任务给线程池来执行,可以通过Future对象来获取返回值,他们背后的实现原理是什么?通过总结背后的实现原理有助于我们深入的理解相关技术,做到触类旁通和举一反三. 文章 ...

  5. OO第二单元单元总结

    总述 OO的第二单元主题是电梯调度,与第一单元注重对数据的输入输出的处理.性能的优化不同,第二单元的重心更多的是在线程安全与线程通信上.这此次单元实验之前,我并未对线程有过了解,更谈不上“使用经验”, ...

  6. 二、PyQt5基本功能和操作入门

    在这里,我将根据自己的学习历程从初级到高级介绍pyqt5.因为是学到哪里就写道哪里,所以内容排版比较随意.有两点问题需要先说明: 1.虽然界面的设计可以借助qt designer进行拖拽创建,并且可以 ...

  7. java中的 java.util.concurrent.locks.ReentrantLock类的使用方式

    实现了lock的类为:ReentrantLock 接口的方式解释: lock()方法为获取锁对象,如果未获取到锁就一直获取锁. trylock():为布尔值,返回是否获取到了锁,如果没有获取到锁则返回 ...

  8. 【机器学习】随机森林 Random Forest 得到模型后，评估参数重要性

    在得出random forest 模型后,评估参数重要性 importance() 示例如下 特征重要性评价标准 %IncMSE 是 increase in MSE.就是对每一个变量 比如 X1 随机 ...

  9. 虚方法(virtual)和抽象方法(abstract)的和接口(interface)的区别

    虚方法(virtual)和抽象方法(abstract)的区别 2017年06月15日 13:41:26 阅读数:65 注:本文转载自 http://www.cnblogs.com/michaelxu/ ...

  10. T-4-java核心API-集合类

    一.集合 用于存储类型一致的一组对象的数据结构. 类似于数组,但是集合提供了操作算法:集合=数据存储+操作算法.集合的用途极其广泛,如歌曲列表,联系人列表对话记录等. 集合比数组多了操作算法,便于提高 ...