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

迷南。 2022-09-07 14:53 169阅读 0赞

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

### 文章目录 ###

*   *   *   *   *   *  1. 新增uploadImg.js
                     *  2. 页面引入uploadImg.js
                     *  3. 初始化插件
                     *  4. 添加支持的后缀

###### 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"],

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 VM虚拟机无法拖拽、粘贴、复制

VM无法从客户机拖放/复制文件到虚拟机的解决办法：将这两项取消勾选，点击【确定】。再次打开，勾选，点击【确定】 ![3beb059619d64d719a227f8c9c6

心已赠人/ 2024年04月01日 15:20/ 0 赞/ 91 阅读

相关 java 拖拽上传_Java swing怎么实现上传文件并支持拖拽上传

展开全部你这个复杂了，我稍微说说吧。进度条稍微简单点，你就去看看Oracle的tutorial就行了，记得运用科学(或3231313335323631343130323

深碍√TFBOYSˉ_/ 2022年11月02日 11:46/ 0 赞/ 421 阅读

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

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

迷南。/ 2022年09月07日 14:53/ 0 赞/ 170 阅读

相关拖拽上传图片--文件

应用upload.js 拖拽上传开始 document.addEventListener("drop",function(e){ //拖离

港控/mmm°/ 2022年07月26日 11:20/ 0 赞/ 264 阅读

相关 ajax 文件拖拽上传

客户端服务器端客户端 <!DOCTYPE html> <html lang="en"> <head>

╰半夏微凉°/ 2022年07月19日 06:00/ 0 赞/ 269 阅读

相关 Bootstrap 实现文件的本地拖拽上传

代码： uploadfile.html <!DOCTYPE html> <html> <head> <title>文件上传</

落日映苍穹つ/ 2022年06月11日 01:58/ 0 赞/ 361 阅读

相关使用dropzone实现文件拖拽上传功能

![70][] ![70 1][] 前端代码，关于dropzone的配置我写在注释里了 <html> <head> <meta chars

川长思鸟来/ 2022年05月25日 09:10/ 0 赞/ 280 阅读

相关运用jQuery剪切版插件实现复制粘贴功能

今天遇到这么一个功能，，点击“复制“按钮，可以进行复制。 ![这里写图片描述][70] 当时在做vue项目的时候有用到过vue的剪切版组件。可是这个后台系统是用jquer

心已赠人/ 2022年05月19日 11:04/ 0 赞/ 281 阅读

相关 JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）

原文地址：[http://www.cnblogs.com/xishuai/p/jquery-paste-upload-image.html][http_www.cnblogs.

向右看齐/ 2022年05月15日 10:24/ 0 赞/ 334 阅读

相关 electron 拖拽上传文件

1、因为electron集成了node,故可以使用node的方式来对文件操作代码示例: //引入node模块 const fs=require('fs')

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:49/ 0 赞/ 1053 阅读