editormd实现文章详情页面预览

继之前博客写了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实现文章详情页面预览的更多相关文章

基于SpringBoot从零构建博客网站 - 开发文章详情页面
文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...
阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_13-课程预览功能开发-CMS页面预览接口测试
5.2 CMS页面预览测试 CMS已经提供了页面预览功能,课程预览功能要使用CMS页面预览接口实现,下边通过cms页面预览接口测试课程预览的效果. 1.向cms_page表插入一条页面记录或者从cm ...
基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetC ...
微信小程序（七）文章详情页面动态显示
文章详情页面动态显示(即点击某个文章就跳转到相应文章的详情页): 思路:在文章列表页面添加catchtop事件,在js文件中获取文章的index,并用wx.navigateTo中的 url拼接详情页的 ...
阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试
通过nginx转发到预览的地址重启nginx 添加页面预览按钮调整下列表的列的宽度
阶段5 3.微服务项目【学成在线】_day04 页面静态化_23-页面预览-页面预览开发
1.用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接. 2.cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型. 3.cms根据页面id查询页面模板内容 4.c ...
UploadFile控件，提交图片后，页面预览显示刚刚提交的图片
最近在用asp.net来写一个新闻系统后台,然后由于不用用网上的flash插件来上传图片什么的,我就用asp.net的控件来写,但是控件总归有一些用的不够灵活的地方.这次测试提出,文章在修改的时候,需 ...
Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
HTML页面预览表格文件内容
背景简介在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中 vue项目第三方 exceljs 安装 npm install exceljs 插件使用 github 中文文 ...

随机推荐

centos中病毒
嗯很开中了病毒,,,而且这是第二次了.... 然后大佬说让我 crontab -l 一下然后试了下然后出来这个东东执行下 crontab -r 这个然后就crontab -l 就 ...
Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
spring事务相关
在 SPRING 中一共定义了六种事务传播属性 PROPAGATION_REQUIRED -- 支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. PROPAGATION_SUPPOR ...
ACM(图论)——tarjan算法详解
---恢复内容开始--- tarjan算法介绍: 一种由Robert Tarjan提出的求解有向图强连通分量的线性时间的算法.通过变形,其亦可以求解无向图问题桥: 割点: 连通分量: 适用问题: 求 ...
口试C#概念
C#概念装箱拆箱: 值类型与引用类型:值类型:System.ValueType(继承自System.Object)引用类型:System.Object 反射:反射提供一种编程方式,让程序员可以在程序 ...
Injection
what java EE提供了注入机制,使您的对象能够获取对资源和其他依赖项的引用,而无需直接实例化它们.通过使用将字段标记为注入点的注释之一来装饰字段或方法,可以在类中声明所需的资源和其他依赖项.然 ...
Python开发——8.模块
一.模块 1.模块 (1)定义:一个.py文件就是一个模块 (2)原因:为了防止程序代码越来越长,对函数进行分组放到不同的文件夹里. (3)优点:提高代码的可维护性:模块编写完毕可以被别人引用,也可以 ...
修改mysql登录密码
通过cmd 登录进mysql系统后,输入 : set password for root@localhost = password('admin'); 其中admin 为新密码: 导入外部数据库 ...
c++中二级指针的使用场景
二级指针的使用场景如下: 1.主要用来为指针变量分配内存空间: void GetMemory(char **p) { *p = ]; } 函数调用方式: char *str = NULL; GetMe ...
bzoj4568(合并线性基+倍增)
裸题练习模板 #include<iostream> #include<cstring> #include<cmath> #include<cstdio> ...

editormd实现文章详情页面预览

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

随机推荐

热门专题