資訊

目的：makdown富文字編輯器，支援複製貼上圖片
參考文章：editor.md實現拖拽剪下複製貼上上傳圖片,檔案外掛
使用該片文章前提條件：已經能夠使用django-mdeditor進行編輯、儲存檔案

方法

1. 檢視admin的change頁面的原始碼

有配置mdeditoreditormd("id_body-wmd-wrapper",的js方法，在mdeditor庫裡去搜索找到了在markdown.html檔案裡

2. 修改\site-packages\mdeditor\templates\markdown.html檔案

• 第91行插入：initPasteDragImg(this); //必須
• 在標籤裡插入：

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);
    formData.append('content', '');
    $.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("上傳失敗");
            }
        }
    });
}
 

3.複製貼上圖片就可以用了