Editor.md实现拖拽剪切复制粘贴上传图片插件
简介editor.md作为一款Markdown编辑器,界面美观,功能强大。但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码。
转载:editor.md实现拖拽剪切复制粘贴上传图片,文件插件
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) {
// 搜索剪切板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("");
}else{
Editor.insertValue("[下载附件]("+msg["url"]+")");
}
}else{
console.log(msg);
alert("上传失败");
}
}
});
}
2、页面引入uploadImg.js
<script src="uploadImg.js" type="text/javascript"></script>
3、初始化
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); //主要添加这一句代码
}
});
简单三步就实现了Editor.md拖拽剪切复制粘贴上传图片的功能。
前一篇博客中已经说过Golang对Gzip的处理,其实这是我的服务器端的处理,那么当我们服务器返回Gzip压缩的字符串后,客户端如何进行解压呢?本文主要记录下JavaScript对Gzip进行压缩和解压处理。
速查表是自己整理了一份在工作中常用的一些资料,包含了自己在日常开发中需要常常用到的相关技术。可以给读者进行参考。
Tauri 是一个框架,用于为所有主要桌面平台构建小巧、快速的二进制文件。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架,以构建他们的用户界面。应用程序的后端是一个基于 Rust 的二进制文件,带有一个前端可以与之交互的 API。
Tauri 应用程序的用户界面目前在 macOS 和 Windows 上利用 tao 作为窗口处理库,在 Linux 上通过 Tauri 团队孵化和维护的 WRY 利用 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK 创建一个统一的系统 webview(和其他好东西,如菜单和任务栏)接口。
最近关注流媒体服务器来做网络直播,本想使用阿里云的流媒体服务器,由于费用的问题还是想能否自己搭建一个流媒体服务器供自己测试使用。果不其然,Nginx居然如此强大,可以用来做流媒体服务器。本文将具体介绍流媒体服务器的搭建过程和使用过程。
vmstat是Virtual Memory Statistics(虚拟内存统计)的缩写,利用该命令可以对操作系统的内存信息、进程状态和CPU活动等进行监视。但是只能对系统的整理情况进行统计,无法对某个进程进行深入的分析。
快速生成表格
Electron页面跳转、浏览器打开链接和打开新窗口
在Mac电脑中,如何对Git的用户名和密码进行修改呢?起初不懂Mac,所以整了很久,本文将记录如何对这个进行操作,以便后期使用。
在使用Git的过程中,不想每次都输入用户名和密码去拉取代码,所以就需要保存这些信息,那么既然有保存了,就必须有清除功能。
Docker编译镜像出现:fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/main/x86_64/APKINDEX.tar.gz
ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.12/main: temporary error (try again later)
WARNING: Ignoring APKINDEX.2c4ac24e.tar.gz: No such file or directory问题