Since we want to integrate, the first step is to find the source and download it directly to the official website.

Official website address: https://pandao.github.io/editor.md/

Extract the download file after downloading

If the dependency used is basically marked with a red box, drop the required dependency into the resources directory of your project.

Find the html of the text input box and start to introduce dependency.

// Import css style file
<link rel="stylesheet" href="/css/editormd.css" />
<link rel="stylesheet" href="/css/editormd.preview.min.css" />
// Introduce dependency such as js
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/editormd.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script src="/lib/marked.min.js"></script>

Replace the text input box with the Markdown editor

<div id="test-editormd">
	<textarea  placeholder="text" style="display:none;"></textarea>
</div>

Initializing js of Markdown editor

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", { // Test editormd is the id of the div where the editor was previously defined.
            width: "98%",
            height: 300,
            syncScrolling: "single",
            path: "/lib/", //Your path path (the location of the lib package in the original resource file in our project)
            saveHTMLToTextarea: true,
            emoji: true,
            taskList: true,
            tex: true,
            flowChart: true,
            tocm: true,
            sequenceDiagram: true,
            /* Upload picture configuration */
            imageUpload: false,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // Upload image support format
            imageUploadURL: "../imageUpload" // Path to upload image
        });
    });
</script>

The above integrated editor is finished, and the next step is to show the data.

The first step is still to introduce the required dependencies

<link rel="stylesheet" href="/css/editormd.css" />
<link rel="stylesheet" href="/css/editormd.preview.min.css" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/lib/marked.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script src="/lib/raphael.min.js"></script>
<script src="/lib/underscore.min.js"></script>
<script src="/lib/sequence-diagram.min.js"></script>
<script src="/lib/flowchart.min.js"></script>
<script src="/lib/jquery.flowchart.min.js"></script>
<script src="/js/editormd.min.js"></script>

div displayed on the page

    <div id="test-editormd" >
        <textarea style="display:none;"></textarea>
    </div>

Analytic js

<script type="text/javascript">
    editormd.markdownToHTML("test-editormd", {
        htmlDecode      : "style,script,iframe",
        emoji           : true,
        taskList        : true,
        tex             : true,  // Not resolved by default
        flowChart       : true,  // Not resolved by default
        sequenceDiagram : true  // Not resolved by default
    });
</script>

This completes the simple integration of Markdown editor Editor.md.