zoukankan      html  css  js  c++  java
  • editmd输出到前端显示

    官方案例: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>
    一万年太久,只争朝夕!
  • 相关阅读:
    python多版本与虚拟环境
    前端开发:基于cypress的自动化实践
    Selenium 4.0beta:读源码学习新功能
    Selenium 4.0beta: Grid 工作原理
    自己上手写性能工具(三)
    如何实现共享屏幕标注功能?
    资源下载网站
    修改tmux背景色
    使用nas唤醒其他PC主机
    2021.26 富兰克林效应
  • 原文地址:https://www.cnblogs.com/chaoba/p/10465528.html
Copyright © 2011-2022 走看看