官方案例: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输出到前端显示
最新推荐文章于 2024-10-04 06:11:34 发布