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

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) {// 搜索剪切板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 (!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"],

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

editor.md实现拖拽剪切复制粘贴上传图片,文件插件
editor.md作为一款Markdown编辑器,界面美观,功能强大但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码. uploadImg. ...
ue编辑器拖拽上传图片_editor.md实现拖拽剪切复制粘贴上传图片,文件插件
editor.md作为一款Markdown编辑器,界面美观,功能强大但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码. uploadImg. ...
kali安装vmtools不能拖拽（复制粘贴）文件解决方法
命令行下执行 apt-get install open-vm-tools-desktop fuse 以安装open-vm-tools 部分提示安装错误,找不到指定目录,附上解决方法: 需要添加更新源 ...
ubuntu 设置文件拖拽，复制粘贴方法
ubuntu 设置文件拖拽,复制粘贴方法 1.设置文件拖拽: 第一步: sudo apt-get autoremove open-vm-tools 第二步:sudo apt-get install o ...
复制链接到剪切板php,剪切复制粘贴
# 剪切复制粘贴在这个页面中: * [基础](#基础) * [复制选中的文本片段](#复制选中的文本片段) * [复制文件路径](#复制文件路径) * [复制行或符号的引用](#复制行或符号的引用) ...
Mac OS开发—Xcode给Mac应用添加编辑快捷键(剪切复制粘贴全选删除撤销重做)功能
前言笔者做Windows开发的,无奈公司有Mac OS的项目需要维护,之前没有编辑菜单的功能,需要笔者加上这个功能,笔者只能硬着头皮上.还好会c++,Mac应用里面一般都会用object-c 也可以 ...
delphi 复制到剪贴板_Delphi中的基本剪贴板操作（剪切/复制/粘贴）
delphi 复制到剪贴板 The Windows Clipboard represents the container for any text or graphics that are cut, ...
android 剪切板监听_安卓监听剪切复制粘贴事件实例
本文的剪切复制粘贴事件只针对文本,URI 和 intent 不在讨论范围内. 实例代码实现了2个功能: 监听剪切复制粘贴事件: 获取剪切复制或粘贴的文本: 剪切复制有2个方法监听剪切复制事件:剪切板 ...
el-tiptap富文本框拖拽和复制的图片会跳过上传服务器解决方案
最近在业务上遇到个问题,因为富文本框存在一个漏洞,正常使用菜单栏上面的上传图片,会先传到服务器上,再将服务器返回的地址传给后端接口,但是通过拖拽或者复制的图片,依旧是base64格式,查看官方文档也没 ...

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

文章目录

1. 新增uploadImg.js

2. 页面引入uploadImg.js

3. 初始化插件

4. 添加支持的后缀

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

最新文章

热门文章