富文本编辑器有很多，以前用百度的UEditor,但是后来接触到Markdown之后，慢慢的喜欢了。
github，简书，网易云笔记等都使用了Markdown。
找了很久在github上找到了SimpleMDE。
- weui.min.css是微信UI的样式
- stylesheet.css是simplemde官方给的一个预览html用的样式
- simplemde.min.css是simplemde编辑器的样式
- jquery.min.js 发起AJAX请求的需要
- simplemde.min.js是simplemde编辑器初始化等需要
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>SimpleMarkDownEditor-Demo</title>
<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="https://simplemde.com/stylesheets/stylesheet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<style>
.CodeMirror {height: 500px;/*SimpleMDE的高度*/}
</style>
</head>
<body>
<section class="main-content">
<h1>添加文章</h1>
<input id="name" type="text" class="weui-input" placeholder="请输入标题" required autofocus>
<br/><br/>
<textarea id="detail"></textarea>
<a href="javascript:void(0);" id="submit" class="weui-btn weui-btn_primary">添加</a>
</section>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
//http://api.jquery.com/jQuery.ajax/
var url = "http://localhost:8000/v1/", token = "gwLTE1MDM1NTI4OTUtMGM3ZWY2ZGFkMmMzNGYxNDk1ZmUwOTc1MGQ1MTM1YTc=bGl4aWFuZz";
//初始化SimpleMDE
var simplemde = new SimpleMDE({
autosave: {
enabled: true,
uniqueId: "MyUniqueID",
delay: 1000
},
status: ["autosave", "lines", "words"],
spellChecker: false,
element: document.getElementById("detail"),
promptURLs: true,
toolbar: [
"bold", "italic", "strikethrough", "heading", "code", "quote", "unordered-list",
"ordered-list", "clean-block", "link", "image", "table", "horizontal-rule", "preview", "side-by-side", "fullscreen", "guide",
{
name: "uploadImage",//自定义按钮
action: function customFunction(editor) {
console.log(editor);
},
className: "fa fa-star",
title: "Upload Image"
}
]
});
//store
$("#submit").on('click', function () {
console.log(simplemde.value());
$.ajax({
method: "POST",
url: url + "articles",
data: {name: $("#name").val(), detail: simplemde.value()},
headers: {token: token}
}).done(function (result) {
alert(result.msg);
});
});
</script>
</body>
</html>
效果如图：
MarkdownEditor-Demo.png
网友评论