The official website of markdown's Editor.md plug-in: https://pandao.github.io/edit...

One: Download Editor.md

1: download directly on the official website

github download address: https://github.com/pandao/edi...

2: Download with npm

npm install editor.md

The downloaded file structure is as follows:

2. Simple use of Editor.md

1: premise:

Introducing css

<link rel="stylesheet" href="editormd/css/editormd.css" />

Introducing js

<script src="js/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>

2: html+js to achieve markdown effect

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
<textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea>
</div>
<script src="js/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
      var editor = editormd("test-editor", {
        width  : "100%",            //Width, not filled in 100%
        height : "500px",           //Height, not 100%
        theme : "dark",             //Subject, not filled in as default subject
        path   : "editormd/lib/",   //lib directory address of editor.md plug-in
        saveHTMLToTextarea : true, // Save HTML to Textarea
        toolbarAutoFixed:true,      //On and off of automatic positioning of toolbars
      });
    });
</script>

According to the above code, the markdown editor can be implemented.

But the above code does not have the function of uploading pictures locally. If you need the function of uploading pictures locally, the js code is modified as follows:

$(function() {
    var editor = editormd("test-editor", {
        width  : "100%",            //Width, not filled in 100%
        height : "500px",           //Height, not 100%
        theme : "dark",             //Subject, not filled in as default subject
        path   : "editormd/lib/",   //lib directory address of editor.md plug-in
        saveHTMLToTextarea : true, // Save HTML to Textarea
        toolbarAutoFixed:true,      //On and off of automatic positioning of toolbars
        imageUpload : true,         //Run local upload
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],    //File formats allowed to upload
        imageUploadURL : "/index.php?r=markdown/upload"                 //Upload background server path
    });
});

The simple implementation of back-end upload is as follows (here I use the Yii framework's intervention/image Plugin)

Yii::$app->response->format = Response::FORMAT_JSON;
$upload = \Intervention\Image\ImageManagerStatic::make($_FILES['editormd-image-file']['tmp_name'])->save('upload/upload.jpg');//file is the name of the uploaded form
if ($upload) {
    return [
        'success' => 1,
        'message' => 'Upload success',
        'url' => 'upload/upload.jpg'
    ];
} else {
    return [
        'success' => 0,
        'message' => 'Upload failure',
    ];
}

According to the above code, you can upload local pictures in the markdown editor.