在页面中插入Markdown编辑器
2018-09-05 本文已影响0人
ai_cuicui
前端在页面中插入Markdown编辑器：
1.官网下载：http://pandao.github.io/editor.md/
2.你的html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="js/editor.md-master/css/editormd.min.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/editor.md-master/editormd.min.js"></script>
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div class="editormd" id="test-editormd">
<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
<textarea class="editormd-html-textarea" name="text"></textarea>
</div>
</div>
</body>
</html>
3.你的js
<script type="text/javascript">
$(function() {
editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
//你的lib目录的路径，和你引入js,css路径一样
path : "js/editor.md-master/lib/",
//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
saveHTMLToTextarea : true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/upload/image"
});
});
</script>
一个简单的Markdown就完成了！
