Laravel installe l'éditeur de démarques pour prendre en charge le téléchargement de captures d'écran

Markdown écrit deux points de douleur majeurs

1. Impossible de télécharger automatiquement des images lors de l'insertion d'images pendant l'écriture
2. Lors de l'utilisation de la grammaire dans le processus d'écriture, le basculement entre la méthode de saisie chinoise et anglaise empêche

Dans ce numéro, nous résolvons le premier problème. Comment insérer des images en douceur dans le processus d'écriture Markdown a toujours été un casse-tête.

De nombreux logiciels Markdown sont livrés avec la fonction de collage d'image ctrl + v , sinon le bouton droit ou le bouton a un raccourci pour insérer le canal d'image local. Mais il ne peut être lu que localement. Si vous téléchargez d'autres plates-formes telles que WeChat public, les images locales deviendront invalides.

La pratique habituelle consiste à télécharger l'image locale sur le lit d'image, à l'insérer dans l'article après avoir obtenu le lien externe et à utiliser Markdown Here pour le rendu.

Dans l'article précédent https://blog.csdn.net/lchmyhua88/article/details/105465580, cet article a présenté sa méthode d'installation, il suffit maintenant d'ajouter coller cet événement d'action pour répondre au téléchargement direct de l'image de copie, pas beaucoup de non-sens, directement sur l'effet:

 

 Ajoutez simplement le code suivant dans votre éditeur:

Étape 1: Importez et téléchargez des photos:

 Étape 2: ajoutez un événement de collage:

 

Le code js est le suivant:

 

function initPasteDragImg (Editor) { 
    var doc = document.getElementById (Editor.id) 
    doc.addEventListener ('coller', 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 (!déposer) {
            console.log ("粘贴 内容 非 图片"); 
            revenir; 
        } 
    
        uploadImg (fichier, éditeur); 
    }); 

    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 ( fichiers [0], éditeur);
     }) 
} 
function uploadImg (fichier, éditeur) { 
    var formData = new FormData (); 
    var fileName = new Date (). getTime () + "." + file.name.split ("."). pop (); 
    formData.append ('editormd-image-file', fichier, nom de fichier); 

    $ .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) $ /.
                    //Editor.insertValue ("! [图片 alt] ("
                    Editor.insertValue ("! [] (" + Msg ["url"] + ")"); 
                } else { 
                    Editor.insertValue ("[下载 附件] (" + msg ["url"] + ")"); 
                }      
            } else { 
                console.log (msg); 
                alert ("上传 失败"); 
            } 
                  

        } 
    }); 


}

Après les opérations ci-dessus, la capture d'écran Markdown peut être téléchargée.