editor.md作為一款Markdown編輯器,界面美觀,功能強(qiáng)大

但是圖片,文件上傳方面缺少了剪切,拖拽上傳,有那么一點(diǎn)每中不足，下面就簡(jiǎn)單實(shí)現(xiàn)一個(gè)刀崖，廢話不多說,直接上代碼展箱。

uploadImg.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("當(dāng)前瀏覽器不支持");
            return;
        }
        if (!file) {
            console.log("粘貼內(nèi)容非圖片");
            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"]+" ''圖片title'')");
                }else{
                    Editor.insertValue("[下載附件]("+msg["url"]+")");
                }     
            }else{
                console.log(msg);
                alert("上傳失敗");
            }
        }
    });


}

使用方法

1.頁面引入uploadImg.js

<script src="uploadImg.js" type="text/javascript"></script>

2.editor.md配置開啟圖片上傳功能,onload事件里面初始化插件

var testEditor = editormd("test-editormd", {
                        width: "90%",
                        height: 740,
                        path : '../lib/',
                        theme : "dark",
                        previewTheme : "dark",
                        editorTheme : "pastel-on-dark",
                        codeFold : true,
                        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                        searchReplace : true,

                        imageUpload : true, //必須
                        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL : "./php/upload.php", //必須
                        onload : function() {
                            initPasteDragImg(this); //必須

                        }
});

3.復(fù)制粘貼,拖拽文件也是可以的,上傳服務(wù)添加支持的后綴就可以。

官方提供了php的上傳代碼./editor.md/blob/master/examples/php/upload.php

這樣就支持txt,pdf的拖拽,復(fù)制轉(zhuǎn)帖上傳功能了。

4 GIthub : https://github.com/mifunc/editor.md.uploadImg 提供了php的demo,開箱即用