背景
富文本编辑器在有些情况下还是没有markdown编辑器方便,故重新整合了一个方便快捷的markdown编辑器:editor.md。
官网演示地址
http://editor.md.ipandao.com/examples/code-fold.html
集成
1.引入css和js
页面中只需要引入editormd.min.css和editormd.min.js文件(注意:对于jquery相关的引用记得放在其他js之前即可)。
<link rel="stylesheet" href="editormd/css/editormd.css"/>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
在通过editormd
去渲染即可。
成功案例代码如下:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>editor.md</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="editormd/css/editormd.css"/>
</head>
<body>
<h1 style="text-align:center">editor.md</h1>
<div id="test-editor">
<textarea style="display:none;">
</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("test-editor", {
width : "90%",
height : "800",
path : "editormd/lib/"
//其他样式设置可参考官网。
});
});
</script>
</body>
</html>
over!