官方案例：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. 本人的CSDN博客

    本人的CSDN博客链接: 传送门

  2. 【NOIP2015模拟11.4】JZOJ8月6日提高组T1 刷题计划

    [NOIP2015模拟11.4]JZOJ8月6日提高组T1 刷题计划 题目 题解 题意 有\(n\)道题,编号为1~\(n\) 给出\(m\)次操作 每次操作有3种类型 1 \(x\) 表示交了\(A ...

  3. Hyper-V 中设置虚拟机静态 IP

    一.新建虚拟网络交换机 二.配置网络 网络共享默认使用 192.168.137.0/255 作为内网地址,192.168.137.1 作为网关 三.配置虚拟机静态 IP 安装完成虚拟机后修改配置文件: ...

  4. CSDN-markdown编辑器使用方法

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  5. Python使用import导入模块时执行了模块的文件但报ModuleNotFoundError错误的愚蠢问题

    老猿在学习import导入自定义模块时,搜索路径中sys.path中已经添加对应路径,发现会报ModuleNotFoundError,但对应的模块代码被执行了,代码myfib.py如下: def fi ...

  6. 第11.26节 Python正则表达式运算符优先级

    正则表达式从左到右进行计算,并遵循优先级顺序,相关运算符的优先级顺序按下表从高到低排列. 例如:字符具有高于替换运算符的优先级,使得"m|food"匹配"m"或 ...

  7. 一台电脑上同时安装python2和python3

    被python2的编码问题整的快晕了,python3对编码问题解决的不错 所以想安装下python3,但由于目前企业大多还是用python2,所以不想卸载2,让python2和python3共存. 本 ...

  8. python web的一些常见技术面试笔试题

    1. 三次握手四次挥手   tcp建立连接的过程是三次挥手,断开连接是4次挥手. 三次握手:建立连接时 a. 客户端发送syn=1 seq=k给服务器 b. 服务器接收到之后知道有客户端想建立连接, ...

  9. UOJ80 二分图最大权匹配

    草,学了一下午假板子,sb博客害人 题目大意: 一个教室有\(n\)个男生和\(m\)个女生,某些男女之间愿意早恋(雾),其早恋好感度为\(w_i\),问怎样让男女配对使得班里好感度之和最大 \(n\ ...

  10. AGC043 B题题解

    有的时候,碰到一道题,要给自己先设立部分分,再去想如何把部分分推广到一般情况.这题就是绝佳的例子. 不妨将\(a_i\)用\(a_i - 1\)替代,这样就变成了\(a_i \in \{ 0, 1, ...