editmd输出到前端显示
2024-09-04 08:21:04
官方案例：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>
最新文章
- 【翻译】Awesome R资源大全中文版来了，全球最火的R工具包一网打尽，超过300+工具，还在等什么？
- 使用HTML5的cavas实现的一个画板
- Linux虚拟化学习笔记<一>
- 发布报错:Error ITMS-90635 - Invalid Mach-O in bundle - submitting to App store
- IOS_反射
- winform中dataGridView隔行显示不同的背景色，鼠标移动上显示不同颜色，离开后变回原色
- HttpClient模拟http请求
- Spring day01笔记
- day4----json的简单实用
- setup 桌面化设置网卡
- javac: cannot execute binary file
- 传纸条（一）（双线程dp）
- hdu 4638 Group 莫队算法
- java面向对象_接口
- python 基础（四） 正则，递归 生成器
- Java_打印从一个数到另一个数之间的整数,并每5个为一行
- 使用selenium模拟登陆oschina
- python中常用的模块二
- 全排列问题Ⅱ（Java实现）
- jquery的extend函数