效果图：
先看效果图了解下，是不是你想要的？如果适合就继续往下看吧！
一、下载插件
项目地址：http://pandao.github.io/editor.md/
二、引用插件
下载安装包后放在相应的目录中并引用；
<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" /> //依赖jquery <script type="text/javascript" src="lib/js/jquery.min.js"></script> <script src="lib/js/editor.md-master/editormd.min.js"></script> //需要这三个文件，自己对应好目录哦
三、在自己的页面中加上对应的id
<div class="btns">
<button id="goto-line-btn">Goto line 90</button>
<button id="show-btn">Show editor</button>
<button id="hide-btn">Hide editor</button>
<button id="get-md-btn">Get Markdown</button>
<button id="get-html-btn">Get HTML</button>
<button id="watch-btn">Watch</button>
<button id="unwatch-btn">Unwatch</button>
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
<button id="toc-menu-btn">ToC Dropdown menu</button>
<button id="toc-default-btn">ToC default</button>
</div>
<div id="layout" class="editor">
<div id="test-editormd">
<textarea></textarea>
</div>
</div>
四、js代码
主要就是说这个就是代码，记得make一下！
var testEditor;
testEditor = editormd("test-editormd", {
path : "/static/plugins/editor-md/lib/",
width: "60%", //宽度
height: "400px", //高
theme: "dark",//工具栏主题
previewTheme: "dark",//预览主题
editorTheme: "pastel-on-dark",//编辑主题
markdown: "",
placeholder:'Markdown编辑，左边编写，右边预览', //默认显示的文字，这里就不解释了
watch : false, // 关闭实时预览
syncScrolling: "single",
codeFold: true,
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
searchReplace: true,
htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
/*
{
success : 0 | 1, //0表示上传失败;1表示上传成功
message : "提示的信息",
url : "图片地址" //上传成功时才返回
}
*/
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/Center/RichTextUpload",
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用
// toolbarIcons : function() { //自定义工具栏，后面有详细介绍
// return laofaneditormd.toolbarModes['simple']; // full, simple, mini
// },
onload: function () {
//console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
//上面的挑有用的写上去就行
综上所述一个编辑器就诞生了，下面有几个小知识点，大家看一下，或许用得上。
//跳转到行
$("#goto-line-btn").bind("click", function(){
laofaneditormd.gotoLine(5);
});
//显示编辑器
$("#show-btn").bind('click', function(){
laofaneditormd.show();
});
//隐藏编辑器
$("#hide-btn").bind('click', function(){
laofaneditormd.hide();
});
//获取md
$("#get-md-btn").bind('click', function(){
alert(laofaneditormd.getMarkdown());
});
//获取html
$("#get-html-btn").bind('click', function() {
alert(laofaneditormd.getHTML());
});
//打开右侧实时预览
$("#watch-btn").bind('click', function() {
laofaneditormd.watch();
});
//关闭右侧实时预览
$("#unwatch-btn").bind('click', function() {
laofaneditormd.unwatch();
});
//预览结果
$("#preview-btn").bind('click', function() {
laofaneditormd.previewing();
});
//全屏
$("#fullscreen-btn").bind('click', function() {
laofaneditormd.fullscreen();
});
//显示工具栏
$("#show-toolbar-btn").bind('click', function() {
laofaneditormd.showToolbar();
});
//关闭工具栏
$("#close-toolbar-btn").bind('click', function() {
laofaneditormd.hideToolbar();
});
//打开目录
$("#toc-menu-btn").click(function(){
laofaneditormd.config({
tocDropdown : true,
tocTitle : "目录 Table of Contents",
});
});
//默认目录
$("#toc-default-btn").click(function() {
laofaneditormd.config("tocDropdown", false);
});
五、页面展示Markdown文档
后台给我们的文档，我们要展示成转换后的样子不能一大堆符号摆在页面上是吧，也不好看呀，所以下面放上展示代码需要的东西。
1、首先引入必要JS（下面不是所有的都必要）
<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> <script src="lib/js/jquery.min.js""></script> <script src="lib/js/editor.md-master/lib/marked.min.js"></script> <script src="lib/js/editor.md-master/lib/prettify.min.js"></script> <script src="lib/js/editor.md-master/lib/raphael.min.js"></script> <script src="lib/js/editor.md-master/lib/underscore.min.js"></script> <script src="lib/js/editor.md-master/lib/sequence-diagram.min.js"></script> <script src="lib/js/editor.md-master/lib/flowchart.min.js"></script> <script src="lib/js/editor.md-master/editormd.min.js"></script> //具体目录在你下载的文件里都能找到，对号入座
2、页面的div
<div id="layout" class="editor">
<div id="test-editormd" >
<textarea></textarea>
</div>
</div>
3、js代码
testEditor = editormd.markdownToHTML("test-editormd", {
markdown:$scope.apidetails.content,
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
六、自定义工具栏
工具栏分为三组：full、simple、mini 这三个，可以选择，如果想更加自由选你所需，就可以用下面的代码，也可以看看官网的示例：
toolbarIcons : function() {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "bold", "hr"]
},
具体每一个标签代表的什么含义可以对照整个工具栏自己对一下，下面是它的源码：
t.toolbarModes={
full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],
simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],
mini:["undo","redo","|","watch","preview","|","help","info"]
}
