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

    <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Simple example - Editor.md examples</title>
  6.         <meta name="renderer" content="webkit">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.         <link rel="stylesheet" href="css/style.css" th:href="@{/editmd/css/style.css}" />
  10.         <link rel="stylesheet" href="../css/editormd.css" th:href="@{/editmd/css/editormd.css}"/>
  11.         <link rel="stylesheet" href="../../static/css/font.css" th:href="@{/static/css/font.css}">
  12.         <link rel="stylesheet" href="../../static/css/weadmin.css" th:href="@{/static/css/weadmin.css}">
  13.         <!--<link rel="stylesheet"th:href="@{/lib/layui/css/layui.css}">-->
  14.         <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
  15.         <link rel="stylesheet" th:href="@{/editmd/css/editormd.preview.css}">
  16.     </head>
  17.     <body>
  18.     <form class="layui-form">
  19.  
  20.         <div id="layout">
  21.             <div class="layui-form-item">
  22.  
  23.            <h2 th:text="${article.title}"></h2>
  24.             </div>
  25.             <label class="layui-form-label">分类</label>
  26.             <div class="layui-input-block">
  27.                     <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>
  28.             </div>
  29.             </div>
  30.         <div id="test-editormd-view">
  31.                 <textarea style="display:none;" name="textContent" th:text="${article.textContent}">
  32.                 </textarea>
  33.             <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
  34.             <!--<textarea id="text" class="editormd-html-textarea" name="content"></textarea>-->
  35.         </div>
  36.         </div>
  37.         <div class="layui-form-item">
  38.         </div>
  39.     </form>
  40.  
  41.         <script src="js/jquery.min.js" th:src="@{/editmd/js/jquery.min.js}"></script>
  42.     <script src="/lib/layui/layui.js" charset="utf-8"></script>
  43.  
  44.     <script src="../lib/marked.min.js" th:src="@{/editmd/lib/marked.min.js}"></script>
  45.     <script src="../lib/prettify.min.js" th:src="@{/editmd/lib/prettify.min.js}"></script>
  46.  
  47.     <script src="../lib/raphael.min.js" th:src="@{/editmd/lib/raphael.min.js}"></script>
  48.     <script src="../lib/underscore.min.js" th:src="@{/editmd/lib/underscore.min.js}"></script>
  49.     <script src="../lib/sequence-diagram.min.js" th:src="@{/editmd/lib/sequence-diagram.min.js}"></script>
  50.     <script src="../lib/flowchart.min.js" th:src="@{/editmd/lib/flowchart.min.js}"></script>
  51.     <script src="../lib/jquery.flowchart.min.js" th:src="@{/editmd/lib/jquery.flowchart.min.js}"></script>
  52.  
  53.     <script src="../editormd.min.js" th:src="@{/editmd/editormd.min.js}"></script>
  54.  
  55.     <script type="text/javascript">
  56.         $(function() {
  57.             var testEditormdView;
  58.             testEditormdView = editormd.markdownToHTML("test-editormd-view", {
  59.                 htmlDecode      : "style,script,iframe",  // you can filter tags decode
  60.                 emoji           : true,
  61.                 taskList        : true,
  62.                 tex             : true,  // 默认不解析
  63.                 flowChart       : true,  // 默认不解析
  64.                 sequenceDiagram : true,  // 默认不解析
  65.             });
  66.         });
  67.     </script>
  68.  
  69.     <script type="text/javascript">
  70.         layui.use(['form','layer'], function(){
  71.  
  72.             var form = layui.form;
  73.             var layer = layui.layer;
  74.         });
  75.     </script>
  76.     </body>
  77. </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. nginx,wsgi项目部署

    1.一些重要概念 https://www.cnblogs.com/xiaonq/p/8932266.html 1.1web容器 什么是web容器 1.web容器是帮助我们部署java丶php丶pyth ...

  2. 【GDKOI2014】JZOJ2020年8月13日提高组T1 阶乘

    [GDKOI2014]JZOJ2020年8月13日提高组T1 阶乘 题目 Description Input 第一行有一个正整数T,表示测试数据的组数. 接下来的T行,每行输入两个十进制整数n和bas ...

  3. 在 Spring Boot 中使用 Flyway

    一.Flyway 介绍 Flyway 是一个开源的数据库迁移工具,MySQL, SQL Server, Oracle 等二十多种数据库 在 Flyway 中数据库的所有改变均称为迁移(migratio ...

  4. js实现视频截图,视频批量截图,canvas实现

    截取视频的某一时间的图像并保存 利用canvas的绘画能力画出视频某一帧的视频画面, 获得到图像之后转换成base64图像, 再利用a标签的实现自动保存到本地 html代码 <!DOCTYPE ...

  5. 老猿学5G：融合计费的Nchf和Nchf‘服务化接口消息Nchf_ConvergedCharging_Create、Update、Release和Notify

    ☞ ░ 老猿Python博文目录░ 一.引言 在<老猿学5G扫盲贴:中国移动的5G计费架构解读>介绍了5G融合计费的服务化接口包括: CHF提供给CTF使用的Nchf接口 OCF提供给CH ...

  6. PyQt（Python+Qt）学习随笔：QScrollArea的alignment属性不起作用的原因

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Scroll Area滚动区域提供了一个呈现在其他部件上的可滚动区域视图,对应类为QScrollAr ...

  7. 定位方式 及CSS高级技巧

    定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...

  8. 【题解】The Great Divide [Uva10256]

    [题解]The Great Divide [Uva10256] 传送门:\(\text{The Great Divide [Uva10256]}\) [题目描述] 输入多组数据,每组数据给定 \(n\ ...

  9. bilibili插件推荐

    目前看到的好的插件就两个,现在来介绍一下. 第一个是 哔哩哔哩助手 这是它的功能,这里就以截图来给大家看 以上为这个插件的所有功能. 点击前往官网 第二个是 bilibili网页端添加APP首页推荐 ...

  10. JavaSE13-常用API&异常

    1.包装类 1.1 基本类型包装类 基本类型包装类的作用 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据 常用的操作之一:用于基本数据类型与字符串之间的转换 基本类型 包装 ...