介绍一款markdown编辑器bootstrap-markdown，基于前端框架bootstrap
引入之后如下所示：
bootstrap-markdown编辑器
需要的文件我已经整理如下：
需要的库文件
index.html 内容如下：
<!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">
<!-- 该文件控制图标显示 -->
<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': "标题",
'URL/Link': "链接",
'Image': "图片",
'List': "列表",
'Unordered List': "无序列表",
'Ordered List': "有序列表",
'Code': "代码",
'Quote': "引用",
'Preview': "预览",
'strong text': "粗体",
'emphasized text': "强调",
'heading text': "标题",
'enter link description here': "输入链接说明",
'Insert Hyperlink': "URL地址",
'enter image description here': "输入图片说明",
'Insert Image Hyperlink': "图片URL地址",
'enter image title here': "在这里输入图片标题",
'list text here': "这里是列表文本",
'code text here': "这里输入代码",
'quote here': "这里输入引用文本"
};
}(jQuery));
//初始化编辑器
$("#editor").markdown({
autofocus: true,
language: 'zh',
})
</script>
</body>
</html>
总结经验：在我不会js语法的前提下还要把js的markdown插件引入，我的方法是对照可以正常显示的markdown编辑器网站的源码，看他引入了哪些文件，我再去下载这些文件，按顺序引入。不过前提是你需要了解一下你所用的前端框架的基本的使用方法，也不要懒，英文的文档不难的，因为你找不到中文文档~
网友评论