Laravel instala el editor de rebajas para admitir la carga de capturas de pantalla

Markdown escribiendo dos principales puntos débiles

1. No se pueden cargar imágenes automáticamente al insertar imágenes durante la escritura
2. Cuando se usa la gramática en el proceso de escritura, el cambio entre el método de entrada de chino e inglés dificulta

En este número, resolvemos el primer problema. Cómo insertar imágenes sin problemas en el proceso de escritura de Markdown siempre ha sido un dolor de cabeza.

Muchos programas de Markdown vienen con la función de pegar imagen ctrl + v ; de lo contrario, el botón derecho o el botón tiene un atajo para insertar el canal de imagen local. Pero solo se puede leer localmente. Si carga otras plataformas como WeChat public, las imágenes locales dejarán de ser válidas.

La práctica habitual es cargar la imagen local en la base de imágenes, insertarla en el artículo después de obtener el enlace externo y usar Markdown Here para renderizar.

En el artículo anterior https://blog.csdn.net/lchmyhua88/article/details/105465580 este artículo introdujo su método de instalación, ahora solo es necesario agregar pegar este evento de acción para cumplir con la carga de imagen de copia directa, no muchas tonterías, directamente sobre el efecto:

 

 Simplemente agregue el siguiente código en su editor:

Paso 1: importar y cargar imágenes:

 Paso 2: agregue un evento de pegado:

 

El código js es el siguiente:

 

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) { 
                    archivo = elementos [i] .getAsFile (); 
                    romper; 
                } 
            } 
        } else { 
            console.log ("当前 浏览 器 不 支持"); 
            return; 
        } 
        if (!expediente) {
            console.log ("粘贴 内容 非 图片"); 
            regreso; 
        } 
    
        uploadImg (archivo, 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 ("soltar", función (e) { 
        e.preventDefault () 
        e.stopPropagation () 
     var files = this.files || e.dataTransfer.files; 
     uploadImg ( archivos [0], Editor);
     }) 
} 
función uploadImg (archivo, Editor) { 
    var formData = new FormData (); 
    var fileName = new Date (). getTime () + "." + file.name.split ("."). pop (); 
    formData.append ('editor-archivo-imagen-md', archivo, nombreArchivo); 

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

            var success = msg [' éxito ']; 
            if (éxito == 1) { 
                var url = msg ["url"]; 
                if (/ \. (png | jpg | jpeg | gif | bmp | ico) $ /.
                    //Editor.insertValue("![Picture alt] ("+ msg [" url "] +" '' Título de la imagen '') ");
                    Editor.insertValue ("! [] (" + Msg ["url"] + ")"); 
                } else { 
                    Editor.insertValue ("[下载 附件] (" + msg ["url"] + ")"); 
                }      
            } else { 
                console.log (msg); 
                alerta ("上传 失败"); 
            } 
                  

        } 
    }); 


}

Después de las operaciones anteriores, se puede cargar la captura de pantalla de Markdown.