editor.md 实现拖拽剪切复制粘贴上传图片,文件插件

editor.md作为一款Markdown编辑器,界面美观,功能强大
但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码。

文章目录

1. 新增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("当前浏览器不支持");
            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);

    $.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("上传失败");
            }
        }
    });


}
2. 页面引入uploadImg.js
<script src="${re.contextPath}/js/uploadImg.js"></script>
3. 初始化插件

editor.md配置开启图片上传功能,onload事件里面初始化插件

  var testEditor;
    $(function () { 
        testEditor = editormd("test-editormd", { 
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "${re.contextPath}/editor/lib/",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "txt", "pdf"],
            imageUploadURL: "/file",
            //这个配置在simple.html中并没有,但是为了能够提交表单,使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中,方便post提交表单。
            saveHTMLToTextarea: true,
            // previewTheme : "dark"
            onload: function () { 
                initPasteDragImg(this); //必须
            }
        });
    });
4. 添加支持的后缀

复制粘贴,拖拽文件也是可以的,上传服务添加支持的后缀就可以。

 imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],

后面添加, "txt", "pdf"

 imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "txt", "pdf"],
    原文作者:gblfy
    原文地址: https://blog.csdn.net/weixin_40816738/article/details/119883905
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞