ue编辑器拖拽上传图片_editor.md实现拖拽剪切复制粘贴上传图片,文件插件
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实现拖拽剪切复制粘贴上传图片,文件插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux rm 不释放_linux删除
- 下一篇： shell tr 替换 空格_shell