Markdown editor Use of MD plug-in

Official website ： 

Editor.md - Open source online Markdown Editor (pandao.github.io)https://pandao.github.io/editor.md/index.html Configuration item ：

var testEditor;
testEditor = editormd("test-editormd", {
     placeholder:' This editor supports Markdown edit , Write on the left , Preview right ',  // Default display text , There is no explanation here 
     width: "90%",
     height: 640,
     syncScrolling: "single",  
     path: "lib/js/editor.md-master/lib/",   // Yours path route （ In the original resource file lib The location of the package in our project ）
     theme: "dark",// Toolbar theme 
     previewTheme: "dark",// Preview the theme 
     editorTheme: "pastel-on-dark",// Edit the theme 
     saveHTMLToTextarea: true,
     emoji: false,
     taskList: true, 
     tocm: true,         // Using [TOCM]
     tex: true,                   //  Unlock the scientific formula TeX Language support , Off by default 
     flowChart: true,             //  Enable flow chart support , Off by default 
     sequenceDiagram: true,       //  Open the timing / Sequence diagram support , Off by default ,
     toolbarIcons : function() {  // Custom toolbar , More on that later 
         return editormd.toolbarModes['simple']; // full, simple, mini
      },
});
// Just pick the useful ones on the top and write them 

obtain Markdown Formatted text

document.querySelector('.editormd-markdown-textarea').value 

obtain markdown Rendered articles

document.querySelector('.markdown-body').textContent,

  Custom toolbar

Toolbars are divided into three groups ,full, simple, mini These three , You can choose , You can also set the toolbar freely , The free setting toolbar is written on the official website , Just introduce 3 Group .

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

Each tag represents a tool , You can also customize the toolbar by using the label above , Each tag specifically represents a tool that is not available on the official website , So you can only compare it with the toolbar