Laravel installs markdown editor to support screenshot upload

Markdown writing two major pain points

Cannot upload pictures automatically when inserting pictures during writing
When using grammar in the writing process, switching between Chinese and English input method hinders

In this issue, we solve the first problem. How to insert pictures smoothly in the Markdown writing process has always been a headache.

Many Markdown software comes with ctrl+v paste image function, otherwise the right button or button has a shortcut to insert the local image channel. But it can only be read locally. If you upload other platforms such as WeChat public, the local pictures will become invalid.

The usual practice is to upload the local picture to the image bed, insert it into the article after getting the external link, and use Markdown Here for rendering

In the previous article https://blog.csdn.net/lchmyhua88/article/details/105465580 this article introduced its installation method, now only need to add paste this action event to meet the direct copy image upload, not much Nonsense, directly on the effect:

Just add the following code in your editor:

Step 1: Import and upload pictures:

Step 2: Add a paste event:

The js code is as follows:

function initPasteDragImg(Editor){
    var doc = document.getElementById(Editor.id)
    doc.addEventListener('paste', function (event) {
        var items = (event.clipboardData || window.clipboardData).items;
        var file = null;
        if (items && items.length) {
            // 搜索剪切板items
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
        } else {
            console.log("当前浏览器不支持");
            return;
        }
        if (!file) {
            console.log("粘贴内容非图片");
            return;
        }
    
        uploadImg(file,Editor);
    });

    var dashboard = document.getElementById(Editor.id)
    dashboard.addEventListener("dragover", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("dragenter", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("drop", function (e) {
        e.preventDefault()
        e.stopPropagation()
     var files = this.files || e.dataTransfer.files;
     uploadImg(files[0],Editor);
     })
}
function uploadImg(file,Editor){
    var formData = new FormData();
    var fileName=new Date().getTime()+"."+file.name.split(".").pop();
    formData.append('editormd-image-file', file, fileName);

    $.ajax({
        url: Editor.settings.imageUploadURL,
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function (msg) {

            var success=msg['success'];
            if(success==1){
                var url=msg["url"];
                if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
                    //Editor.insertValue("![图片alt]("+msg["url"]+"''Image title'')"); 
                    Editor.insertValue("![]("+msg["url"] +")"); 
                }else{ 
                    Editor.insertValue("[Download attachment]("+msg["url"]+")"); 
                }      
            }else{ 
                console.log(msg); 
                alert("Upload failed" ); 
            } 
                  

        } 
    }); 


}

After the above operations, the Markdown screenshot can be uploaded.

Laravel installs markdown editor to support screenshot upload

Guess you like