Markdown编辑器Editor.md集成使用教程

typecho同款编辑器带ui界面小白易上手

一、下载插件

项目地址：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"]
}