继之前博客写了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. EasyPR源码剖析（5）：车牌定位之偏斜扭转

    一.简介 通过颜色定位和Sobel算子定位可以计算出一个个的矩形区域,这些区域都是潜在车牌区域,但是在进行SVM判别是否是车牌之前,还需要进行一定的处理.主要是考虑到以下几个问题: 1.定位区域存在一 ...

  2. ldd源码编译出现的问题

    1.Fix it to use EXTRA_CFLAGS.  Stop 1). # make KBUILD_NOPEDANTIC=12). Relace all CFLAGS with EXTRA_C ...

  3. vscode+MinGW+cmake设置轻量ide

    本地随手写一些题目的时候,发现visual studio非常庞大emmm vscodevscode是一个轻量编辑器 (1)vscode插件与设置自动同步 在两个电脑上,用vscode可以同步插件 ,利 ...

  4. CKeditor5 图片上传

    下面是自定义了一个适配器,之前我一直是在 ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: '/ckfinder/core/ ...

  5. Cookie保存中文用户名报错（500）

    在用Cookie保存用户名时候,当用户名是中文的时候服务器报错了. HTTP Status 500 - An exception occurred processing JSP page /dolog ...

  6. 2019.03.29 NOIP训练 友好国度（点分治+容斥）

    传送门 思路: 直接上点分治+容斥计算每个因数对应的贡献即可. 代码: #include<bits/stdc++.h> #define ri register int using name ...

  7. Python开发——16.HTML

    一.HTML 1.服务端 import socket def main(): sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock. ...

  8. 跨域资源共享(CROS)

    跨域资源共享(CROS) 同源策略(Same Origin Policy, SOP) 同源策略允许运行在页面的脚本可以无限制的访问同一个网站(同源)中其他脚本的任何方法和属性.当不同网站页面(非同源) ...

  9. Go的Get命令兼容公司Gitlab仓库的HTTP协议

    对于公司的私有Gitlab仓库,没有对https支持,在使用最新版本的go get命令时,需要使用-insecure参数来支持http,但如果导入的包里边依赖了需要https的仓库,就不好使了,折腾了 ...

  10. python_flask 基础巩固 (DEBUG模式)

    默认情况下flask不会开启DEBUG模式,开启DEBUG模式后,flask会在每次保存代码的时候自动的重新载入代码,并且如果代码有错误,会在终端进行提示. 开启DEBUG模式有四种方式: 1.直接在 ...