editor.md 实现拖拽剪切复制粘贴上传图片,文件插件

editor.md作为一款Markdown编辑器,界面美观,功能强大
但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码。

文章目录

            • 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("当前浏览器不支持");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("上传失败");}}});}
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",//这个配置在simple.html中并没有,但是为了能够提交表单,使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中,方便post提交表单。saveHTMLToTextarea: true,// previewTheme : "dark"onload: function () {initPasteDragImg(this); //必须}});});
4. 添加支持的后缀

复制粘贴,拖拽文件也是可以的,上传服务添加支持的后缀就可以。

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速Ubuntu的配置(以ubuntu 20.04桌面版为例)

文章目录一、&#x1f496;更换镜像源二、&#x1f496;安装VMware Tools工具三、&#x1f496;安装Google浏览器四、&#x1f496;安装搜狗输入法五、&#x1f496;安装C/C开发工具Clion&#x1f340;1.安装编译环境&#x1f340;2.安装开发环境一、&#x1f496;更换镜像源 …

阿里工程师太凶残了,竟把服务器泡在“水里”!

万众瞩目的第11个双11要来了&#xff01;这次天猫说要帮大家省500亿&#xff0c;身边加购物车、组队盖楼的同学数不胜数&#xff0c;热闹非凡。 但在阿里&#xff0c;有一位低调的“高冷男”&#xff0c;丝毫不为红红火火的双11所动&#xff0c;依然稳如磐石、淡定自若。 他的…

“我今年 31 岁,工作 7 年,明年退休...”

凌晨 1:30 的北京&#xff0c;商务楼静静地伫立着&#xff0c;街道上的车水马龙&#xff0c;慢慢地停歇了&#xff0c;只有他的工作台灯还没有休息&#xff0c;台灯忽明忽暗地坚持着。凌晨 2:00 的闹钟忍不住提醒他&#xff0c;电脑也偷偷跳出窗口&#xff1a;“主人&#xff0…

据说这是双11前互联网人的一天~

双11前&#xff0c;据说互联网人的一天是这样度过.... 6段故事&#xff0c;6个黑话关键词&#xff0c;生动刻画了双11前互联网人的一天&#xff01; 上午9点&#xff0c;运营找老板汇报双11方案。 运营说&#xff1a;老板&#xff0c;本次营销方案你看需要一些预算资源支持&a…

快速入门docker容器

文章目录&#x1f332;1.拉取一个镜像&#x1f332;2. 在docker里启动一个镜像&#x1f332;3.查看所有的镜像列表&#x1f332;4.删除镜像&#x1f332;5.删除全部image镜像&#x1f332;6.运行tomcat&#x1f332;7.删除所有未运行的容器&#x1f332;8.以守护态运行容器&…

前台传String日期格式后台用Date类型接收

在接收实体的这个字段上添加注解 DateTimeFormat(pattern "yyyy-MM-dd")是后台date传到前台展示时可以帮你转成String JsonFormat(pattern "yyyy-MM-dd", timezone "GMT8")

不会玩游戏的程序员不是好作家,《深入理解Java虚拟机》周志明来了!

嘉宾&#xff1a;周志明、杨福川采访、撰文&#xff1a;Satoh_AI这次采访起源来自于我和豆瓣的一位读者有同样的好奇心&#xff0c;为什么网上搜不到周志明老师的更多信息&#xff1f;为什么“80后玩家”可以把本本书都维持在9.0分左右&#xff1f;他的“社恐”到底有多严重?所…

当手机淘宝遇见折叠屏,让购物更随心

华为 5G 新品发布会上&#xff0c;Mate X 正式亮相&#xff0c;淘宝也作为重点展示应用出现在发布会的 PPT 上&#xff0c;同时也成为折叠屏生态联盟应用矩阵的第一位。 现场华为折叠屏上的淘宝多任务演示 伴随手淘技术团队对华为折叠屏适配工作的展开。半年前还只是概念方案的…

SpringBoot2.x 整合 Ueditor

文章目录一、基础准备1. 创建项目并引入依赖2. 下载Ueditor源码3. Java代码整合4. 静态文件整合二、静态页面控制层2.1. index.html2.2. demo1.html2.3. demo2.html2.4. demo3.html2.5. Controller三、配置调整3.1. 图片大小3.2. 修改ueditor.config.js3.3. 修改config.json文件…

无线路由攻击和WiFi密码破解实战[渗透技术]

文章目录一、准备阶段二、攻击阶段1.停止&#x1f6d1;网络管理员2.开启网卡监听模式3. 捕获数据包4.获取数据包5.注入数据包&#xff08;DeAuth洪水攻击&#xff09;5.WiFi密码破解一、准备阶段 攻击主机&#xff1a;kali Linux攻击工具&#xff1a;aircrack-ng、airodump-ng…

支付宝双11狂欢幕后的女程序员:服务全球12亿人,每天和不法分子打攻防战

再过3天&#xff0c;全球最大的购物狂欢节就开始了。 在这个睡不着的午夜&#xff0c;无数男男女女会在闪烁的屏幕前滑屏、抢购、享受秒级付款带来的快感。整个过程大脑分泌的多巴胺&#xff0c;又驱使他们以更快的速度重新填满购物车。 2018年天猫双11成交额2135亿元&#x…

技术直播:程序员副业的修炼指南!(限免报名)

面试造飞机&#xff0c;上班拧螺丝&#xff0c;每天想辞职&#xff0c;但无奈副业还“大器晚成”的样子&#xff01;那可能是你还没有选对副业&#xff01;滴滴 ~福利卡&#xff01;&#xff01;&#xff01;CSDN学院邀请汤小洋老师开设技术直播课《程序员副业之路-三大终极秘籍…

轻松解决Android gradle太慢问题

夫陶公清风千古&#xff0c;余又何人&#xff0c;敢称庶几 一、解决方案 从网上下载对应版本的gradle,然后把gradle压缩包复制到C:\Users\liuxin\.gradle\wrapper\dists\gradle-6.5-all\2oz4ud9k3tuxjg84bbf55q0tn目录下&#xff0c;重新build工程就搞定了。 安卓开发者平台官…

持续交付体系在高德的实践历程

1. 前序 对于工程团队来说&#xff0c;构建一套具有可持续性的、多方面质量保证的交付体系建设&#xff0c;能够为业务价值的快速交付搭建起高速公路&#xff0c;也能为交付过程中的质量起到保驾护航的作用。本文为大家介绍持续交付体系在高德的演进与落地。 2. 持续交付 正…

RuoYi-Cloud 部署篇_01(windows环境 mysql +nginx版本)

文章目录一、基础准备1. 技术选型2. 源码克隆3. 安装依赖4. 将 RuoYi-Cloud 项目导入到 IDEA5. 安装启动Mysql6. 安装启动Redis7. 创建数据库&#xff0c;执行 SQL脚本文件二、安装与配置 nacos2.1. 下载nacos2.2. 安装 nacos2.3. nacos持久化配置2.4. 执行脚本文件2.5. nacos连…

趣头条基于 Flink 的实时平台建设实践

本文由趣头条实时平台负责人席建刚分享趣头条实时平台的建设&#xff0c;整理者叶里君。文章将从平台的架构、Flink 现状&#xff0c;Flink 应用以及未来计划四部分分享。 一&#xff0e;平台架构 1.Flink 应用时间线 首先是平台的架构&#xff0c;2018 年 3 月之前基本都是基…

我!程序猿!被银行套路了!

作者 | 程序猿石头责编 | Carol封图 | CSDN 付费下载自视觉中国话说&#xff0c;你肯定也经常收到各个银行电话推销&#xff0c;可以办理小额贷款/信用卡账单分期/万用金&#xff0c;或者其他乱七八糟的名字的产品。又或者接到电话说&#xff0c;“石头先生&#xff0c;我们有留…

巧妙地在Windows搭建node服务器

夫陶公清风千古&#xff0c;余又何人&#xff0c;敢称庶几 文章目录一、 安装node1. 官网下载node.js2. 测试npm是否成功安装3. 配置npm模块和缓存的存放路径4. 安装express5. 配置npm环境变量二、安装cnpm1.执行安装2. 配置cnpm环境变量一、 安装node 1. 官网下载node.js 官…

jdk8下载

文章目录1. 官网2. windows下载链接3. linux下载链接1. 官网 https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html 2. windows下载链接 https://download.oracle.com/otn/java/jdk/8u301-b09/d3c52aa6bfa54d3ca74e617f18309292/jdk-8u301-window…

测试工程师不懂AI,还有未来吗?

阿里妹导读&#xff1a;近几年人工智能、机器学习等词漫天遍地&#xff0c;似乎有一种无AI&#xff0c;无研发&#xff0c;无AI&#xff0c;无测试的感觉。有人说&#xff1a;不带上“智能”二字&#xff0c;都不好意思说自己是创新。我们先暂且不评论对错&#xff0c;只探讨这…