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

大大多多

一、效果图

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

二、下载插件

项目地址：http://pandao.github.io/editor.md/
下载安装包后放在相应的目录中并引用

1. <link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
   
2. //依赖jquery
   
3. <script type="text/javascript" src="lib/js/jquery.min.js"></script>
   
4. <script src="lib/js/editor.md-master/editormd.min.js"></script>
   
5. //需要这三个文件，自己对应好目录哦

复制代码

三、在自己的页面中加上对应的id

1. <div id="layout" class="editor">
   
2.     <div id="test-editormd">
   
3.         <textarea></textarea>
   
4.     </div>
   
5. </div>

复制代码

四、js代码

主要就是说这个就是代码，记得make一下

1. var testEditor;
   
2. testEditor = editormd("test-editormd", {
   
3.      placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
   
4.      width: "90%",
   
5.      height: 640,
   
6.      syncScrolling: "single",  
   
7.      path: "lib/js/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
   
8.      theme: "dark",//工具栏主题
   
9.      previewTheme: "dark",//预览主题
   
10.      editorTheme: "pastel-on-dark",//编辑主题
    
11.      saveHTMLToTextarea: true,
    
12.      emoji: false,
    
13.      taskList: true,
    
14.      tocm: true,         // Using [TOCM]
    
15.      tex: true,                   // 开启科学公式TeX语言支持，默认关闭
    
16.      flowChart: true,             // 开启流程图支持，默认关闭
    
17.      sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
    
18.      toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
    
19.          return editormd.toolbarModes['simple']; // full, simple, mini
    
20.       },
    
21. });
    
22. //上面的挑有用的写上去就行

复制代码

综上所述一个编辑器就诞生了，下面有个小知识点。

1. testEditor.getMarkdown();
   
2. // 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。

复制代码

五、页面展示Markdown文档

后台给我们的文档我们要展示成转换后的样子不能一大堆符号摆在页面上是吧，也不好看呀，所以下面放上展示代码需要的东东。

• 首先引入必要JS（下面不是所有的都必要）
  1.    <link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
     
  2.    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
     
  3.    <script src="lib/js/jquery.min.js""></script>
     
  4.    <script src="lib/js/editor.md-master/lib/marked.min.js"></script>
     
  5.    <script src="lib/js/editor.md-master/lib/prettify.min.js"></script>
     
  6.    <script src="lib/js/editor.md-master/lib/raphael.min.js"></script>
     
  7.    <script src="lib/js/editor.md-master/lib/underscore.min.js"></script>
     
  8.    <script src="lib/js/editor.md-master/lib/sequence-diagram.min.js"></script>
     
  9.    <script src="lib/js/editor.md-master/lib/flowchart.min.js"></script>
     
  10.    <script src="lib/js/editor.md-master/editormd.min.js"></script>
      
  11.    //具体目录在你下载的文件里都能找到，对号入座

  复制代码
  
  
• 页面的div
  1. <div id="layout"  class="editor">
     
  2.     <div id="test-editormd" >
     
  3.         <textarea></textarea>
     
  4.     </div>
     
  5. </div>
     

  复制代码
  
  
• js代码
  1. testEditor = editormd.markdownToHTML("test-editormd", {
     
  2.       markdown:$scope.apidetails.content,
     
  3.       htmlDecode      : "style,script,iframe",  // you can filter tags decode
     
  4.       emoji           : true,
     
  5.       taskList        : true,
     
  6.       tex             : true,  // 默认不解析
     
  7.       flowChart       : true,  // 默认不解析
     
  8.       sequenceDiagram : true,  // 默认不解析
     
  9. });

  复制代码
  
  

六、自定义工具栏

工具栏分为三组，full, simple, mini这三个，可以选择，如果想更加自由选你所需，就可以用下面的代码，也可以看看官网的示例

1. toolbarIcons : function() {
   
2.             // Or return editormd.toolbarModes[name]; // full, simple, mini
   
3.             // Using "||" set icons align right.
   
4.             return ["undo", "redo", "|", "bold", "hr"]
   
5.         },

复制代码

具体没一个标签代表的什么含义可以对照整个工具栏自己对一下，下面是他的源码

1. t.toolbarModes={
   
2.     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"],
   
3.     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"],
   
4.     mini:["undo","redo","|","watch","preview","|","help","info"]
   
5. }

复制代码