editor.md作为一款Markdown编辑器,界面美观,功能强大
但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足，下面就简单实现一个，废话不多说,直接上代码。
文章目录
1. 新增uploadImg.js2. 页面引入uploadImg.js3. 初始化插件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 实现拖拽剪切复制粘贴上传图片 文件插件》对你有帮助，请点赞、收藏，并留下你的观点哦！
