Laravelはスクリーンショットのアップロードをサポートするためにマークダウンエディターをインストールします

2つの主要な問題点を書くMarkdown

1. 書き込み中に画像を挿入すると、画像を自動的にアップロードできません
2. 文章作成の過程で文法を使用する場合、中国語と英語の入力方法を切り替えると妨げになります

この号では、最初の問題を解決します。Markdownの書き込みプロセスで画像をスムーズに挿入する方法は常に頭痛の種でした。

多くのMarkdownソフトウェアには、ctrl + v画像貼り付け機能が付属しています。それ以外の場合、右ボタンまたはボタンには、ローカル画像チャネルを挿入するためのショートカットがあります。ただし、ローカルでしか読み取ることができません。WeChatpublicなどの他のプラットフォームをアップロードすると、ローカルの画像は無効になります。

通常は、ローカル画像を画像ベッドにアップロードし、外部リンクを取得した後に記事に挿入し、MarkdownHereを使用してレンダリングします。

前回の記事https://blog.csdn.net/lchmyhua88/article/details/105465580で、この記事ではインストール方法を紹介しました。このアクションイベントを追加するだけで、直接コピー画像のアップロードに対応できます。ナンセンスではありません。効果について：

 

 エディターに次のコードを追加するだけです。

ステップ1：写真をインポートしてアップロードする：

 手順2：貼り付けイベントを追加します。

 

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）{ 
            //搜索編切板itemsfor 
            （var i = 0; i <items.length; i ++）{ 
                if（items [i] .type.indexOf（ 'image'）！= = -1）{ 
                    file = items [i] .getAsFile（）; 
                    break; 
                } 
            } 
        } else { 
            console.log（ "当前浏览器不礼"）; 
            return; 
        } 
        if（！ファイル）{
            console.log（ "固贴内容非図片"）; 
            戻る; 
        } 
    
        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）$ /。
                    //Editor.insertValue（ "！[図片alt]（"
                    Editor.insertValue（ "！[]（" + msg ["url"] + "）"）; 
                } else { 
                    Editor.insertValue（ "[下取附件]（" + msg ["url"] + "）"）; 
                }      
            } else { 
                console.log（msg）; 
                alert（ "アップロード失败"）; 
            } 
                  

        } 
    }）; 


}

上記の操作の後、Markdownスクリーンショットをアップロードできます。