Laravel 安裝markdown 編輯器支持截圖上傳

Markdown寫作兩大痛點

1. 寫作過程中插入圖片無法自動上傳圖牀
2. 寫作過程中使用語法時，輸入法中英文切換阻礙

本期我們解決第一個問題。如何在Markdown寫作過程，較爲流暢插入圖片，一直是一個令人頭疼的問題。

許多Markdown軟件自帶ctrl+v粘貼圖片功能，再不然右鍵或者按鈕都有快捷方式插入本地圖片的通道。但只能本地閱讀，倘若上傳微信公衆等其他平臺，本地圖片就會失效。

常規做法是，將本地圖片上傳圖牀，得到外鏈之後再插入文章中，利用Markdown Here進行渲染

在前面 https://blog.csdn.net/lchmyhua88/article/details/105465580這篇文章中介紹了它的安裝方法，現在只需要加上黏貼這個動作事件即可以滿足直接copy圖片上傳，不多廢話了，直接上效果：

 

 只需要在你的編輯器裏面加上下面的代碼即可：

第一步：引入上傳圖片：

 第二步：添加黏貼事件：

 

js代碼如下：

 

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"]+" ''圖片標題'')");
                    Editor.insertValue("![]("+msg["url"]+")");
                }else{
                    Editor.insertValue("[下載附件]("+msg["url"]+")");
                }     
            }else{
                console.log(msg);
                alert("上傳失敗");
            }
                  

        }
    });


}

上面操作之後即可以實現Markdown 截圖上傳了。