Open source online MarkDown Editor --【Editor.md】

download

Official website address ： https://pandao.github.io/editor.md/index.html
Gitee Address ：https://gitee.com/pandao/editor.md

Editor.md Simple use

1. edit html

<div id="md-content" style="z-index: 1;">
	<!-- Set up here z-index It's to keep the editor in the upper layer with full screen display  -->
</div>

2. stay js Initialize the editor in

var testEditor;
$(function() {
    
testEditor = editormd("md-content", {
    
      width: "90%", // Editor width 
      height: 740,	// Editor height 
      path : '../lib/',	// Here you need to specify the downloaded file lib The path of 
      //--- Set the above three to use ---
      theme : "dark",
      previewTheme : "dark",
      editorTheme : "pastel-on-dark",
      codeFold : true,
      //syncScrolling : false,
      saveHTMLToTextarea : true,    //  preservation  HTML  To  Textarea
      searchReplace : true,
      //watch : false, //  Turn off live preview 
      htmlDecode : "style,script,iframe|on*",            //  Turn on  HTML  Label parsing , For safety reasons , Not on by default  
      //toolbar : false, // Close the toolbar 
      //previewCodeHighlight : false, //  Close the preview  HTML  Block of code highlighted , Default on 
      emoji : true,
      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 ,
      //dialogLockScreen : false, //  Set the pop-up layer dialog box to leave the screen unlocked , The global general , The default is true
      //dialogShowMask : false, //  Set the pop-up layer dialog box to display the transparent mask layer , The global general , The default is true
      //dialogDraggable : false, //  The setup pop-up layer dialog box cannot be dragged , The global general , The default is true
      //dialogMaskOpacity : 0.4, //  Sets the transparency of the transparent mask layer , The global general , The default value is 0.1
      //dialogMaskBgColor : "#000", //  Sets the background color of the transparent mask layer , The global general , The default is #fff
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : "./php/upload.php",
      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);
      }
      });
  });

3. Some methods commonly used by editors

• Jump to the specified line

testEditor.gotoLine(90);

• Show and hide the editor

testEditor.show();
testEditor.hide();

• Get... In the editor md Language

testEditor.getMarkdown();

• Get... In the editor html Language

testEditor.getHTML();

• Turn live preview on and off

testEditor.watch();
testEditor.unwatch();

• View indications

testEditor.previewing();

• Full screen

testEditor.fullscreen();

• Display and hide the toolbar

testEditor.showToolbar();
testEditor.hideToolbar();

• The drop-down menu of the title shows and hides

 testEditor.config({
    
     tocDropdown   : true,
     tocTitle      : " Catalog  Table of Contents",
 });

 testEditor.config("tocDropdown", false);

[TOCM]
[TOC]