editor.md作為一款Markdown編輯器,界面美觀,功能強(qiáng)大
但是圖片,文件上傳方面缺少了剪切,拖拽上傳,有那么一點(diǎn)每中不足，下面就簡單實(shí)現(xiàn)一個(gè)，廢話不多說,直接上代碼。

文章目錄

• • • • • • 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("當(dāng)前瀏覽器不支持");return;}if (!file) {console.log("粘貼內(nèi)容非圖片");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",//這個(gè)配置在simple.html中并沒有，但是為了能夠提交表單，使用這個(gè)配置可以讓構(gòu)造出來的HTML代碼直接在第二個(gè)隱藏的textarea域中，方便post提交表單。saveHTMLToTextarea: true,// previewTheme : "dark"onload: function () {initPasteDragImg(this); //必須}});});

4. 添加支持的后綴

復(fù)制粘貼,拖拽文件也是可以的,上傳服務(wù)添加支持的后綴就可以。
將

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

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

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

總結(jié)

以上是生活随笔為你收集整理的editor.md 实现拖拽剪切复制粘贴上传图片,文件插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。