官方案例：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. rest-framework:频率控制

    一 频率简介: 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则: 自定义的逻辑 #(1)取出访问者ip # (2)判断当前ip不在访问字典里,添加 ...

  2. Unity使用transform.Rotate进行三维旋转角度出现偏差

    Unity使用transform.Rotate进行三维旋转角度出现偏差 情形 最开始遇到该问题的情况比较复杂,另写了一个例子.情形如下: 一个立方体上挂载脚本: transform.Rotate(25 ...

  3. IdentityServer4系列 | 资源密码凭证模式

    一.前言 从上一篇关于客户端凭证模式中,我们通过创建一个认证授权访问服务,定义一个API和要访问它的客户端,客户端通过IdentityServer上请求访问令牌,并使用它来控制访问API.其中,我们也 ...

  4. PyQt（Python+Qt）学习随笔：QTabWidget部件选项卡可用状态访问方法isTabEnabled、setTabEnabled

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTabWidget的每个选项卡及页面可设置是否可用,如果选项卡不可用时,则不能通过操作手工切换到该 ...

  5. Combiner-Reduce之前处理过程

    简介 Combiner是Mapper和Reducer之外的组件. Combiner是在Reducer运行之前,对Mapper数据进行处理的. Wordcount实例 WordCountMapper p ...

  6. [ACTF2020 新生赛]BackupFile && [ACTF2020 新生赛]Upload &&[GYCTF2020]Blacklist

    [ACTF2020 新生赛]BackupFile 尝试找到源代码,加上题目是备份文件,猜测备份文件里面有网站的源代码,御剑扫描一下,就扫到index.php 访问index.php.bak 下载源代码 ...

  7. 刚开始学习Javascript的一些基础小知识，从入门到崩溃，希望对大家有帮助（只适合初学者）

    一.简介 1.JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,js不能操作文件. 重要的开始啦!!!!! 引入javascript: 行间js <d ...

  8. Java并发编程的艺术（七）——线程间的通信

    为什么需要线程间通信 让线程之间合作,提高运行效率. volatile和synchronized关键字 实现原理 这两个方式都是采用共享内存的方式进行通信,通过同步机制保证数据可见性和排他性. 特点 ...

  9. ⑥SpringCloud 实战：引入gateway组件，开启网关路由功能

    这是SpringCloud实战系列中第4篇文章,了解前面第两篇文章更有助于更好理解本文内容: ①SpringCloud 实战:引入Eureka组件,完善服务治理 ②SpringCloud 实战:引入F ...

  10. SpringBoot魔法堂：应用热部署实践与原理浅析

    前言 后端开发的同学想必每天都在重复经历着修改代码.执行代码编译,等待--重启Tomcat服务,等待--最后测试发现还是有bug,然后上述流程再来一遍(我听不见)