官方案例：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. Django----setting.py配置

    过滤器 1,安装 django-filter 2,注册应用 3,配置settings, 在view里配置可过滤的字段 4,使用 查询字符串携带过滤信息 REST_FRAMEWORK = { # 文档报 ...

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

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

  3. Flv.js记录（vue）

    下载 npm install flv.js 插入 import flvjs from 'flv.js'   第一种报错:Failed to read the 'buffered' property f ...

  4. 初学者值得拥有【Hadoop伪分布式模式安装部署】

    目录 1.了解单机模式与伪分布模式有何区别 2.安装好单机模式的Hadoop 3.修改Hadoop配置文件---五个核心配置文件 (1)hadoop-env.sh 1.到hadoop目录中 ​ 2.修 ...

  5. Visual Studio 2012 Ultimate旗舰版下载地址与序列号

    (为了方便个人使用转的的别的帖子的内容,原文链接http://wenku.baidu.com/link?url=acL08J8bTNQ4S5Sd3n3oLN5KJTtrfe8hHuP8aUrNscKN ...

  6. Python中迭代循环使用比较多的range函数的作用

    range函数用于生成一个不可变的数字序列可迭代对象,类型为range,该数字序列通常用于在 for 循环中循环指定的次数. 具体可参考:<Python中与迭代相关的函数>的详细介绍 老猿 ...

  7. PyQt（Python+Qt）学习随笔:QTableView的wordWrap属性

    老猿Python博文目录 老猿Python博客地址 wordWrap属性用于控制视图中数据项文本的换行策略.如果此属性为True,则在数据项文本中分词的适当处进行换:否则数据项文本不进行换行处理.默认 ...

  8. pandas LabelEncoder方法，对离散值进行编码，并储存

    # 3.离散值进行LabelEncoder #处理数据的三个步骤,去重,处理缺失值,离散值LabelEncoder from sklearn import preprocessingfrom skle ...

  9. 第 2 篇Scrum 冲刺博客

    每天举行会议 会议照片: 昨天已完成的工作与今天计划完成的工作及工作中遇到的困难: 成员姓名 昨天完成工作 今天计划完成的工作 工作中遇到的困难 蔡双浩 完成修改个人信息剩余部分 了解任务,并做相关学 ...

  10. 手动 jq 触发 动态的 layui select change 事件

    var s= $('#province').val(); //先获取   默认选中的第一个 option 的值 ( value)    var select = 'dd[lay-value=' + s ...