介紹一款markdown編輯器bootstrap-markdown，基于前端框架bootstrap
引入之后如下所示：
bootstrap-markdown編輯器
需要的文件我已經(jīng)整理如下：
需要的庫(kù)文件
index.html 內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<title>editor</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-markdown.min.css">
<!-- 該文件控制圖標(biāo)顯示 -->
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<form>
<textarea name="content" data-provide="markdown" data-iconlibrary="fa" rows="10" id="editor"></textarea>
</form>
<!-- 該jquery文件必須在bootstrap.min.js之前引入 -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
<script src="js/bootstrap-markdown.fr.js"></script>
<script type="text/javascript">
//顯示中文提示
(function ($) {
$.fn.markdown.messages.zh = {
'Bold': "粗體",
'Italic': "斜體",
'Heading': "標(biāo)題",
'URL/Link': "鏈接",
'Image': "圖片",
'List': "列表",
'Unordered List': "無(wú)序列表",
'Ordered List': "有序列表",
'Code': "代碼",
'Quote': "引用",
'Preview': "預(yù)覽",
'strong text': "粗體",
'emphasized text': "強(qiáng)調(diào)",
'heading text': "標(biāo)題",
'enter link description here': "輸入鏈接說(shuō)明",
'Insert Hyperlink': "URL地址",
'enter image description here': "輸入圖片說(shuō)明",
'Insert Image Hyperlink': "圖片URL地址",
'enter image title here': "在這里輸入圖片標(biāo)題",
'list text here': "這里是列表文本",
'code text here': "這里輸入代碼",
'quote here': "這里輸入引用文本"
};
}(jQuery));
//初始化編輯器
$("#editor").markdown({
autofocus: true,
language: 'zh',
})
</script>
</body>
</html>
總結(jié)經(jīng)驗(yàn)：在我不會(huì)js語(yǔ)法的前提下還要把js的markdown插件引入，我的方法是對(duì)照可以正常顯示的markdown編輯器網(wǎng)站的源碼，看他引入了哪些文件，我再去下載這些文件，按順序引入。不過(guò)前提是你需要了解一下你所用的前端框架的基本的使用方法，也不要懶，英文的文檔不難的，因?yàn)槟阏也坏街形奈臋n~
