继之前博客写了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. centos 下使用vscode 调试egg.js 注意事项

    这两天在centos下,直接用vscode运行egg.js的例子.遇到个问题就是当安装了vscode-egg插件,会遇到一个现象.就是同样的代码,Windows下调试可以顺利进行,但是centos有时 ...

  2. function 函数

    function:函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回.因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑. 如果没有return语句,函数执行完毕后也 ...

  3. ssh多台主机之间不用密码远程

    二.多台服务器相互无密码访问 多台服务器相互无密码访问,与两台服务器单向无密码访问的原理是一样的,只不过由于是多台服务器之间相互无密码访问,不能象两台服务器无密码登录那样直接上传,步骤如下: 1.在需 ...

  4. [C#.Net]Window服务调用外部程序

    最近遇到要做回传服务内增加开关,可以自定义运行一些脚本已方便收集PC状态,发现Bat始终无法运行,上网找了半天才发现和Session0有关,也就是程序有不同级别的访问权限,Vista以上版本为了安全因 ...

  5. springmvc 简单使用

    一.配置(使用)流程 1.新建maven工程,在pom.xml中导入相关包,重要的是springmvc包,servlet包,jstl包 <dependencies>             ...

  6. duilib窗口从任务栏恢复问题

    关闭.最大最小化和恢复等消息由WM_SYSCOMMAND和OnSysCommand()进行处理,需要在HandleMessage()中添加处理.

  7. VS2015环境下生成和调用DLL动态链接库

    一.生成动态链接库: 1.打开VS2015->文件->新建->项目->Visual C++->Win32->Win32控制台应用程序->将名称改为dll_ge ...

  8. XSSearch 说明文档保存

    XSSearch All Packages | 属性 | 方法(函数) 包 XS 继承关系 class XSSearch » XSServer » XSComponent 版本 1.0.0 源代码 s ...

  9. ABAP 常见系统表

    TRDIRT Program nameTFTIT Function module nameDD02T Table name

  10. [转]ps命令详解

    原文地址:http://apps.hi.baidu.com/share/detail/32573968 转载自:http://www.cnblogs.com/wangkangluo1/archive/ ...