讓你自己的網頁支援Markdown編輯器
阿新 • • 發佈:2019-02-04
Editor是一款免費的,開源的輕量級Markdown編輯器,附上下載地址
下載下來的資料夾大概是這樣的結構:
為了防止專案結構混亂,我做了這樣的目錄結構
這裡的new_file.html
是我的頁面,它和plug-ins資料夾同級,plug-ins文加下有JQuery和EditorMD兩個資料夾,剛才下載的檔案就放在這個資料夾下面。
這裡注意一點,由於Editor已經停止維護了,所以他的emoji檔案已經載入不了了,所以我們這裡需要先下載這個資料夾再配置路徑。
emoji下載地址
這4個js檔案的emoji路徑都需要配置:
editormd.emoji = {
path : "plug-ins/EditorMD/plugins/emoji-dialog/emoji/",
ext : ".png"
};
最後就是寫頁面了,我們採用官方github上面的例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EditorMD</title>
<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/lib/codemirror/codemirror.min.css" />
<script type="text/javascript" src="plug-ins/JQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plug-ins/EditorMD/editormd.min.js"></script>
<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.css" />
</head >
<body>
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path: 'plug-ins/EditorMD/lib/'
});
/*
// or
var editor = editormd({
id : "editormd",
path : "../lib/"
});
*/
});
</script>
</script>
</body>
</html>
OK,現在就可以在頁面中使用Markdown了,我覺得這個這個編輯器比CSDN的Markdown編輯器功能要多一點