继之前博客写了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. SNORT入侵检测系统

    SNORT入侵检测系统 YxWa · 2015/10/09 10:38 0x00 一条简单的规则 alert tcp 202.110.8.1 any -> 122.111.90.8 80 (ms ...

  2. mysql导出导入数据

    使用sql语句导出数据: 导出时如果不写绝对路径,会提示The MySQL server is running with the --secure-file-priv option so it can ...

  3. powershell复制文件夹的文件

    function CCopy($folder_a_path,$folder_b_path){ #遍历源文件夹下所有文件 $folders_a = gci $folder_a_path -Recurse ...

  4. java的线程中断

    在java中中断线程可以使用interrupt()函数.此函数虽然不能终止线程的运行,但是可以改变线程的状态为true 即:isInterrupted()的值返回为true 注意:当函数调用了已经被阻 ...

  5. python搭建服务器时nginx的有关问题

    最近在学习Python服务器搭建的内容,网上大多是Windows环境下的,由于我使用的是Mac,为了不想装双系统折腾,就只好一步步采坑了.比较基础的我一步步记录下来, 1.安装nginx: brew ...

  6. AJAX随笔2

    Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...

  7. oracle BLOG图片和CLOG base64码的转换

    --BASE64转图片CREATE OR REPLACE FUNCTION DECODE_BASE64(P_CLOB_IN IN CLOB) RETURN BLOB IS V_BLOB BLOB; V ...

  8. Centos7 登录mysql 出现mysql.sock不存在

    记一次纠错大战 本来今天开开心心地部署nginx和uwsgi到我的Django服务器,刚想给老师演示一遍我这项目如何酷炫时,一登陆就出现mysql连接不上了 (2003, "Can't co ...

  9. 微信小程序的自定义插件

    第一步,创建一个页面和普通页面一样 第二不,在这个页面上进行对json配置, "component":true 第三不在需要插入的页面中进行设置 插入标签 <dialog i ...

  10. ajax轮询与长轮询

      刚刚网了关于轮询的知识,必须拿到自己这里来做个备份了! 其实以前用ajax轮询做个及时数据更新的,只是当时做了不知道那个就是轮询. 首先我们什么时候会想到用轮询技术呢? 一般而言,最多的是及时信息 ...