Use of the Markdown editor editor.md

I. Introduction to Markdown and EDITOR.MD:

Markdown is becoming more and more popular in the technology circle (estimated to be more of a program ape bar). Simple syntax, uniform format, the use of the process, the hand is basically not moved from the keyboard to the mouse up, super convenient. A MD document (that is, an ordinary TXT file with markdown syntax) is written and can be posted on other websites that support markdown format.

EDITOR.MD is a domestic open source of an online markdown editor, based solely on the front-end JavaScript implementation, and back-end what language is irrelevant. This can also draw a flowchart, as well as mathematical formulas. The website Demo example uses the PHP language, and my backend uses JAVA,SPRINGMVC.

The methods and procedures that I used in the personal open source project 17Smart are documented below. 17Smart source code is currently hosted on GitHub, interested can refer to the understanding. second, the use of editor.md: 2.1. Download:

We can download the latest version of V1.5.0 from its official website and extract the resource bundle as shown below:
>1.examples files are all examples using PHP (you can open in the document editor and view the source code); >2.lib is the third-party JS resource that editor.md relies on; >3.plugins is like emoji expression support, Code formatting and other plug-ins; 2.2, simple to use:

Copy the extracted EDITORMD resource files above (select required) to our project to fit under the directory. 2.2.1, the introduction of the relevant CSS and JS on their own page, the code is as follows:

<link rel= "stylesheet" href= "/smart-api/htdocs/mdeditor/css/editormd.css"/> <script

src= "/smart-api/ Htdocs/mdeditor/js/jquery.min.js "></script>
<script src="/smart-api/htdocs/mdeditor/js/ Editormd.min.js "></script>

2.2.2, add a div to your page:

The div ID is my-editormd (this div is in form form). Div contains two textarea, in fact, the official demo only one, the second whether it is convenient for us post submission, the backend can get to the MD document content, such as Java Request.getparameter (" My-editormd-html-code ").

<div id= "My-editormd" >
<textarea id= "My-editormd-markdown-doc" name= "My-editormd-markdown-doc" style= "Display:none;" ></textarea>
<!--Note: The value of the Name property--
<textarea id= "My-editormd-html-code" Name= " My-editormd-html-code "style=" Display:none; " ></textarea>
</div>

It is worth noting here two points: >1. Back end to get the value in the second textarea, you first need to open the Savehtmltotextarea:true setting for EDITOR.MD (see below); >2. TextArea in the name attribute value, should follow the Div Idmy-editormd value to decide, namely $-html-code (just start, the back end alive and alive to get the value, turn to see the source to know) 2.2.3, in the same page and add the following JS code:

<script type= "Text/javascript" >
  $ (function () {
      Editormd ("My-editormd", {//NOTE 1: Here is the id attribute value of the div above
          width   : "90%",
          height  : 640,
          syncscrolling: "single",
          path    : "/smart-api/htdocs/ mdeditor/lib/",///NOTE 2: Your path
          savehtmltotextarea:true//Note 3: This configuration, convenient post submission Form
      });
</script>

It is worth noting here three points: >1. Note 1: Here is the id attribute value of the div above, >2. NOTE 2: Your path Path (the location of the Lib package in our project in the original resource file); >3. Note that 3:savehtmltotextarea sets true or false in relation to whether the backend can obtain a value;

This allows us to complete the simplest editor.md editor, where we can write our familiar markdown documents, including code, with real-time previews on the right. 2.3, upload pictures:

Above the simplest EDITOR.MD editor, still can not upload pictures. We need a little configuration change, or it's pretty simple.

We all know that when writing markdown documents, the picture syntax is! Description (URL address). However, often we need to upload local images. On top of the above, slightly make the following changes (of course, the backend code to write their own):

<script type= "Text/javascript" >
  $ (function () {
      Editormd ("My-editormd", {//NOTE 1: Here is the id attribute value of the div above
          width   : "90%",
          height  : 640,
          syncscrolling: "single",
          path    : "/smart-api/htdocs/ mdeditor/lib/",///NOTE 2: Your path
          savehtmltotextarea:true,//Note 3: This configuration, convenient post submission form

         /** upload picture related configuration as follows *
         / Imageupload:true,
         imageformats: ["JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
         imageuploadurl: "/smart-api/u pload/editormdpic/",//Note your backend Upload Image service address
      });
</script>

Note: editor.md expects you to upload a picture of the service to return the following JSON format content

{
    success:0 | 1,///0 means upload failed; 1 indicates successful upload
    message: "Message prompt",
    URL     : "Image Address"//upload is successful, only return
}

My background uses SPRINGMVC, the code is as follows:
(note: @RequestParam (value = "Editormd-image-file", required = true annotation)

@RequestMapping ("Editormdpic") @ResponseBody public Jsonobject editormdpic (@RequestParam (value = " Editormd-image-file ", required = True) Multipartfile file, HttpServletRequest request,httpservletresponse response)  

        Throws exception{String truefilename = File.getoriginalfilename ();

        String suffix = truefilename.substring (Truefilename.lastindexof ("."));  

        String fileName = System.currenttimemillis () + "_" +commonutils.getrandomnumber (999) +suffix;
        String path = Request.getsession (). Getservletcontext (). Getrealpath ("/assets/msg/upload/");  

        SYSTEM.OUT.PRINTLN (path);  
        File TargetFile = new file (path, fileName);  
        if (!targetfile.exists ()) {targetfile.mkdirs ();  
        }//Save try {File.transferto (targetfile);  
        } catch (Exception e) {e.printstacktrace ();
        } jsonobject res = new Jsonobject (); Res.put ("url", constant.web_root+ "assets/msg/upload/"+filename);
        Res.put ("Success", 1);

        Res.put ("message", "Upload success!");

    return res; }

2.4, Markdown Document page display:

Above we submit through post, the backend gets to the MD document content, often exists in the database, and then on the page display, we need to convert the MD grammar document into HTML syntax (can also be converted to standard HTML storage, but I think the first conversion, will occupy more storage space).

First introduce the necessary JS (not all necessary below):

<script src= "/smart-api/htdocs/mdeditor/js/jquery.min.js" ></script>
<script src= "/smart-api/ Htdocs/mdeditor/lib/marked.min.js "></script>
<script src="/smart-api/htdocs/mdeditor/lib/ Prettify.min.js "></script>
<script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js "></ script>
<script src= "/smart-api/htdocs/mdeditor/lib/underscore.min.js" ></script>
< Script src= "/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js" ></script>
<script src= "/ Smart-api/htdocs/mdeditor/lib/flowchart.min.js "></script>
<script src="/smart-api/htdocs/ Mdeditor/lib/jquery.flowchart.min.js "></script>
<script src="/smart-api/htdocs/mdeditor/js/ Editormd.min.js "></script>

Then, on this page, add the following div:

<div id= "Doc-content" >
    <textarea style= "Display:none;" >${message.detail}</textarea>
</div>

Finally, the following JS code is introduced:

<script type= "Text/javascript" >
    var testeditor;
    $ (function () {
        testeditor = editormd.markdowntohtml ("Doc-content", {//NOTE: Here is the ID of the top div
            htmldecode: "Style, Script,iframe ",
            emoji:true,
            tasklist:true,
            tex:true,//default does not resolve
            flowchart:true,//default does not resolve
            Sequencediagram:true,//default does not parse
            codefold:true,
    });});
 </script>

iii. Additional configuration items for editor.md:

This configuration can be found according to the official demo and source (Editor.md-master/examples directory below). For example, theme color settings, special processing after uploading pictures, etc.

    <script type= "Text/javascript" > var myeditor;
                    $ (function () {myeditor = Editormd ("My-editormd", {width: "90%", height:800, syncscrolling: "single", Path: "/smart-api/htdocs/mdeditor/
                    lib/", savehtmltotextarea:true, Emoji:true,//emoji expression, default off

                    Tasklist:true, Tocm:true,//Using [TOCM] tex:true,//opening scientific Formula Tex language support, default off

                    flowchart:true,//Open Flowchart Support, default off sequencediagram:true,//turn on timing/sequence diagram support, default off, dialoglockscreen:false,//set Pop-up dialog box does not lock the screen, global universal, the default is True dialogshowmask:false,//set Popup dialog box display transparent mask layer, global pass , the default is True dialogdraggable:false,//set Popup dialog box is not draggable, globally universal, default to True dialogmaskopacity: 0.4,//set transparency of transparent matte layer, global universal, default value is 0.1 dialogmaskbgcOlor: "#000",//Set the background color of the transparent matte layer, globally universal, default to #fff codefold:true, Imageupload:true, Imageformats: ["JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"], Imageuploadurl: "/smar
                        t-api/upload/editormdpic/",/* Upload the image after successful can do some of their own processing */onload:function () {
                        Console.log (' onload ', this);
                        This.fullscreen ();
                        This.unwatch ();
                        This.watch (). Fullscreen ();
                        This.width ("100%");
                        This.height (480);
                    This.resize ("100%", 640);
                    },/** set Theme color */editortheme: "Pastel-on-dark", Theme: "Gray",

            Previewtheme: "Dark"});
        }); </script>

Iv. website & source code:Website: 17Smart Source: Github EBook: Deep Anatomy of Tomcat