【Markdown】 编辑器Editor.md集成使用

效果图

先看效果图了解下，是不是你想要的，如果适合就往下看吧，哈哈。

二、下载插件
项目地址：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/",
             "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文档
后台给我们的文档我们要展示成转换后的样子不能一大堆符号摆在页面上是吧，也不好看呀，所以下面放上展示代码需要的东东。

首先引入必要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>
   //具体目录在你下载的文件里都能找到，对号入座

页面的div

 <div id="layout"  class="editor">
    <div id="test-editormd" >
        <textarea></textarea>
    </div>
 </div>

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"]
}