官方案例：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. 一千行MySQL命令

    基本操作 /* Windows服务 */ -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_p ...

  2. moviepy音视频剪辑基类VideoClip的write_videofile方法codec、bitrate、preset、audio_bitrate、audio_nbytes等参数的作用

    ☞ ░ 前往老猿Python博文目录 ░ moviepy音视频剪辑模块的视频剪辑基类write_videofile方法用于将视频剪辑输出到文件,调用语法如下: write_videofile(self ...

  3. 第二十五章、containers容器类部件GroupBox分组框详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 容器部件就是可以在部件内放置其他部件的部件,在Qt Designer中可以使用的容器部件有 ...

  4. 第11.6节 Python正则表达式的字符串开头匹配模式及元字符“^”（插入符、脱字符）功能介绍

    符号"^"为插入符,也称为脱字符,在Python中脱字符表示匹配字符串的开头,即字符串的开头满足匹配模式的要求.这个功能有点类似搜索函数match,只是这是通过搜索模式来指定,而m ...

  5. Python正则表达式re模块学习遇到的问题

    Python正则表达式处理的组是什么? Python正则表达式处理中的匹配对象是什么? Python匹配对象的groups.groupdict和group之间的关系 Python正则表达式re.mat ...

  6. GYCTF Web区部分WP

    目录: Blacklist Easyphp Ezsqli FlaskApp EasyThinking 前言: 这次比赛从第二天开始打的,因为快开学了所以就没怎么看题目(主要还是自己太菜)就只做出一道题 ...

  7. PsySH作为调试器

    PsySH作为调试器 PsySH可以用来在脚本中设置一个断点,在这个断点处它将暂停并提供对shell的访问,以检查变量并在断点所在位置的上下文中运行命令.目前它不支持逐步调试(如xdebug),但在需 ...

  8. Vue--子组件相互传参

    引用了element做按钮组件 父组件 创建子组件公用的空vue变量,为pubVue,并传给需要互相传参/互相调用方法的两个子组件 <template> <div> <b ...

  9. 磁盘inode节点被占满的解决方法

    问题: Linux服务器,查看日志发现程序无法继续写文件,但是用df -h查看磁盘容量还有剩余. 排查思路:怀疑是机器的inode节点被占满,使用df -i查看磁盘inode节点使用情况,果然是ino ...

  10. Vue - 与后端交互

    零:与后端交互 - ajax 版本1 - 出现了跨域问题 前端:index.html <!DOCTYPE html> <html lang="en"> &l ...