editor.md作為一款Markdown編輯器,界面美觀,功能強大

但是圖片,文件上傳方面缺少了剪切,拖拽上傳,有那么一點每中不足，下面就簡單實現一個，廢話不多說,直接上代碼。

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("上傳失敗");

}

}

});

}

使用方法

1.頁面引入uploadImg.js

2.editor.md配置開啟圖片上傳功能,onload事件里面初始化插件

var testEditor = editormd("test-editormd", {

width: "90%",

height: 740,

path : '../lib/',

theme : "dark",

previewTheme : "dark",

editorTheme : "pastel-on-dark",

codeFold : true,

saveHTMLToTextarea : true, // 保存 HTML 到 Textarea

searchReplace : true,

imageUpload : true, //必須

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

imageUploadURL : "./php/upload.php", //必須

onload : function() {

initPasteDragImg(this); //必須

}

});

3.復制粘貼,拖拽文件也是可以的,上傳服務添加支持的后綴就可以。

官方提供了php的上傳代碼./editor.md/blob/master/examples/php/upload.php

這樣就支持txt,pdf的拖拽,復制轉帖上傳功能了。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。