装修设计公司平台,保定网站seo,北京建站公司做网站价格,卢松松网站editor.md作为一款Markdown编辑器,界面美观,功能强大 但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足#xff0c;下面就简单实现一个#xff0c;废话不多说,直接上代码。 文章目录1. 新增uploadImg.js2. 页面引入uploadImg.js3. 初始化插件4. 添加支持的后缀1… 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 fileNamenew 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 successmsg[success];if(success1){var urlmsg[url];if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){Editor.insertValue();}else{Editor.insertValue([下载附件](msg[url]));}}else{console.log(msg);alert(上传失败);}}});}2. 页面引入uploadImg.js
script src${re.contextPath}/js/uploadImg.js/script3. 初始化插件
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 : darkonload: function () {initPasteDragImg(this); //必须}});});4. 添加支持的后缀
复制粘贴,拖拽文件也是可以的,上传服务添加支持的后缀就可以。 将 imageFormats: [jpg, jpeg, gif, png, bmp, webp],后面添加, txt, pdf imageFormats: [jpg, jpeg, gif, png, bmp, webp, txt, pdf],
