官方案例：html-preview-markdown-to-html.html 
输出后台数据显示在前端，格式化内容

<!DOCTYPE html>

<html lang="zh" xmlns:th="http://www.thymeleaf.org">

    <head>

        <meta charset="utf-8" />

        <title>Simple example - Editor.md examples</title>

        <meta name="renderer" content="webkit">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="stylesheet" href="css/style.css" th:href="@{/editmd/css/style.css}" />

        <link rel="stylesheet" href="../css/editormd.css" th:href="@{/editmd/css/editormd.css}"/>

        <link rel="stylesheet" href="../../static/css/font.css" th:href="@{/static/css/font.css}">

        <link rel="stylesheet" href="../../static/css/weadmin.css" th:href="@{/static/css/weadmin.css}">

        <!--<link rel="stylesheet"th:href="@{/lib/layui/css/layui.css}">-->

        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

        <link rel="stylesheet" th:href="@{/editmd/css/editormd.preview.css}">

    </head>

    <body>

    <form class="layui-form">

        <div id="layout">

            <div class="layui-form-item">

           <h2 th:text="${article.title}"></h2>

            </div>

            <label class="layui-form-label">分类</label>

            <div class="layui-input-block">

                    <label  class="layui-form-label" th:each="enum:${articleEnum}" th:if="${enum.id eq article.type}" th:value="${enum.id}" th:text="${enum.name}"></label>

            </div>

            </div>

        <div id="test-editormd-view">

                <textarea style="display:none;" name="textContent" th:text="${article.textContent}">

                </textarea>

            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->

            <!--<textarea id="text" class="editormd-html-textarea" name="content"></textarea>-->

        </div>

        </div>

        <div class="layui-form-item">

        </div>

    </form>

        <script src="js/jquery.min.js" th:src="@{/editmd/js/jquery.min.js}"></script>

    <script src="/lib/layui/layui.js" charset="utf-8"></script>

    <script src="../lib/marked.min.js" th:src="@{/editmd/lib/marked.min.js}"></script>

    <script src="../lib/prettify.min.js" th:src="@{/editmd/lib/prettify.min.js}"></script>

    <script src="../lib/raphael.min.js" th:src="@{/editmd/lib/raphael.min.js}"></script>

    <script src="../lib/underscore.min.js" th:src="@{/editmd/lib/underscore.min.js}"></script>

    <script src="../lib/sequence-diagram.min.js" th:src="@{/editmd/lib/sequence-diagram.min.js}"></script>

    <script src="../lib/flowchart.min.js" th:src="@{/editmd/lib/flowchart.min.js}"></script>

    <script src="../lib/jquery.flowchart.min.js" th:src="@{/editmd/lib/jquery.flowchart.min.js}"></script>

    <script src="../editormd.min.js" th:src="@{/editmd/editormd.min.js}"></script>

    <script type="text/javascript">

        $(function() {

            var testEditormdView;

            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>

    <script type="text/javascript">

        layui.use(['form','layer'], function(){

            var form = layui.form;

            var layer = layui.layer;

        });

    </script>

    </body>

</html>

editmd输出到前端显示的更多相关文章

  1. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  2. asp.net 读取一个文本文件，并输出到网页显示 通过 一般处理程序实现

    asp.net 读取一个文本文件,并输出到网页显示 通过 一般处理程序实现 用这个可以做模板首页进行输出,也可以自已自定义进行扩展 //得到读取到的文本到string中 string resultTe ...

  3. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  4. C#调用WebService接口实现天气预报在web前端显示

    本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...

  5. C# 实现程序只启动一次（多次运行激活第一个实例,使其获得焦点,并在最前端显示）

    防止程序运行多个实例的方法有多种,如:通过使用互斥量和进程名等.而我想要实现的是:在程序运行多个实例时激活的是第一个实例,使其获得焦点,并在前端显示. 主要用到两个API 函数: ShowWindow ...

  6. 自己总结的，输出到前端JSON的几种方法

    第一种:利用MODEL拼成要输出JSON的对象.再用JSON.NET转成JSON输出到前端(这种常用,就不举例了.) 第二种:利用table拼成JSON数据格式,再用JSON.NET转成JSON输出到 ...

  7. VS编译器中设置 输出窗口 只显示error，不显示warning 要如何配置

    VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...

  8. python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题

    问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...

  9. 同步alv的前端显示和输出内表中的数据

    在使用CL_GUI_ALV_GRID显示报表的时候,当我们使用了checkbox的时候,或者是有可编辑的字段,当我们 在前段修改了单元格内容的时候,后台的内表并不会自动的更新,此时需要我们调用一个方法 ...

随机推荐

  1. ASP.NET Core管道详解[6]: ASP.NET Core应用是如何启动的？[下篇]

    要承载一个ASP.NET Core应用,只需要将GenericWebHostService服务注册到承载系统中即可.但GenericWebHostService服务具有针对其他一系列服务的依赖,所以在 ...

  2. Unity全局调用非静态函数

    Unity全局调用非静态函数 情形 大概就是做游戏的时候想做一个给玩家展示信息的东西,比如玩家按了不该按的键提醒一下之类的.这个脚本倒是很简单,找个Text组件往上面加字就行了.问题在于这个脚本游戏中 ...

  3. 【Usaco 2009 Silver】JZOJ2020年9月19日提高B组T1 音乐节拍

    [Usaco 2009 Silver]JZOJ2020年9月19日提高B组T1 音乐节拍 题目 Description FJ准备教他的奶牛弹奏一首歌曲,歌曲由N(1<=N<=50,000) ...

  4. vue上传视屏或者图片到七牛云

    首先下载七牛云的JavaScript-SDK npm install qiniu-js 下载完成JavaScript-SDK以后就可以上传图片信息了 <template> <div& ...

  5. DVWA SQL Injection Medium

    Mdeium 基本的步骤及知识点在上节已经提到过这里不再赘述:https://blog.csdn.net/WQ_BCJ/article/details/84554777 1)与low级别不同,本次采用 ...

  6. 博客中css样式的正确设置

    一.简介 博客园的文章是支持html代码和css样式的,即使是markdown写作.当某个标签需要特制样式时,我们可以自定义样式来覆盖掉原本的样式. 二.css样式优先级 参考至>>菜鸟教 ...

  7. 密码学系列之:明文攻击和Bletchley Park

    目录 简介 crib和明文攻击 布莱奇利公园(Bletchley Park) 简介 明文攻击就是指已经知道了部分明文和它对应的加密后的字段,从而可以推测出使用的加密手段或者密码本.明文攻击这个故事还要 ...

  8. 推荐系统实践 0x0e LS-PLM

    在之前介绍的几个模型中,存在这些问题: LR不能捕捉非线性,只能进行一次的回归预测 GBDT+LR虽然能够产生非线性特征组合,但是树模型不适用于超高维稀疏数据 FM利用二阶信息来产生变量之间的相关性, ...

  9. 【题解】「UVA11626」Convex Hull

    凸包模板题. 之前写过拿 Graham 算法求凸包的,为了不重复/多学点知识,那这次拿 Andrew 算法求凸包吧qaq *此文章所有图片均为作者手画. Andrew 算法 假设我们有这些点: 首先把 ...

  10. 我的js公共函数合集

    export default {     isDefin: function(value) { //数据是否被定义         if (value == null || value == &quo ...