From a060f87de51c4b26e6f5251cbcf187ef5ec171a4 Mon Sep 17 00:00:00 2001 From: Freen Date: Fri, 29 May 2020 15:46:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=B2=98=E8=B4=B4=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E5=B9=B6callback=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/image-cross-domain-upload.html | 8 +- examples/image-upload.html | 9 +- .../image-handle-paste/image-handle-paste.js | 119 ++++++++++++++++++ 3 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 plugins/image-handle-paste/image-handle-paste.js diff --git a/examples/image-cross-domain-upload.html b/examples/image-cross-domain-upload.html index 3c422885..4bbec3f6 100644 --- a/examples/image-cross-domain-upload.html +++ b/examples/image-cross-domain-upload.html @@ -91,7 +91,13 @@

图片跨域上传示例

imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "http://www.ipandao.com/editor.md/examples/php/cross-domain-upload.php?test=dfdf", crossDomainUpload : true, - uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.html?test=dfdf" + uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.html?test=dfdf", + onload: function() { + // 引入插件 执行监听方法 + editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){ + testEditor.imagePaste(); + }); + } /* 跨域时，上传的图片服务器后台只需要返回一个跳转 URL 并跳转到原页面同域下的 callback 页面，结构如下： diff --git a/examples/image-upload.html b/examples/image-upload.html index 69014cc7..39e37f82 100644 --- a/examples/image-upload.html +++ b/examples/image-upload.html @@ -51,8 +51,13 @@

图片上传示例

//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], - imageUploadURL : "./php/upload.php?test=dfdf", - + imageUploadURL : "./php/upload.php", + onload: function() { + // 引入插件 执行监听方法 + editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){ + testEditor.imagePaste(); + }); + } /* 上传的后台只需要返回一个 JSON 数据，结构如下： { diff --git a/plugins/image-handle-paste/image-handle-paste.js b/plugins/image-handle-paste/image-handle-paste.js new file mode 100644 index 00000000..2f3a73b7 --- /dev/null +++ b/plugins/image-handle-paste/image-handle-paste.js @@ -0,0 +1,119 @@ +/*! + * editormd图片粘贴上传插件 + * + * @file image-handle-paste.js + * @author zhangkaixing + * @modify stray_came + * @date 2020年5月29日 + * @link https://www.codehui.net, https://boywithacoin.cn/ + */ + +(function() { + + var factory = function (exports) { + var $ = jQuery; // if using module loader(Require.js/Sea.js). + var pluginName = "image-handle-paste"; // 定义插件名称 + + //图片粘贴上传方法 + exports.fn.imagePaste = function() { + var _this = this; + var cm = _this.cm; + var settings = _this.settings; + var editor = _this.editor; + var classPrefix = _this.classPrefix; + var id = _this.id; + + if(!settings.imageUpload || !settings.imageUploadURL){ + console.log('你还未开启图片上传或者没有配置上传地址'); + return false; + } + + //监听粘贴板事件 + $('#' + id).on('paste', function (e) { + var items = (e.clipboardData || e.originalEvent.clipboardData).items; + console.log(items[0], items[1]) + + //判断图片类型 + if (items && (items[0].type.indexOf('image') > -1 || items[1].type.indexOf('image') > -1)) { + if (items[0].type.indexOf('image') > -1 ) { + var file = items[0].getAsFile(); + } else { + var file = items[1].getAsFile(); + } + + /*生成blob + var blobImg = URL.createObjectURL(file); + */ + + /*base64 + var reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = function (e) { + var base64Img = e.target.result //图片的base64 + } + */ + + // 创建FormData对象进行ajax上传 + var forms = new FormData(document.forms[0]); //Filename + forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件 + console.log(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png") + //调用imageDialog插件，弹出对话框 + _this.executePlugin("imageDialog", "image-dialog/image-dialog"); + + _ajax(settings.imageUploadURL, forms, function(ret){ + if(ret.success == 1){ + //数据格式可以自定义，但需要把图片地址写入到该节点里面 + $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url); + // cm.replaceSelection("![](" + ret.url + ")"); + } + console.log(ret.message); + }) + } + }) + }; + // ajax上传图片 可自行处理 + var _ajax = function(url, data, callback) { + $.ajax({ + "type": 'post', + "cache": false, + "url": url, + "data": data, + "processData": false, + "contentType": false, + "mimeType": "multipart/form-data", + success: function(ret){ + callback(JSON.parse(ret)); + }, + error: function (err){ + console.log('请求失败') + } + }) + } + }; + + // CommonJS/Node.js + if (typeof require === "function" && typeof exports === "object" && typeof module === "object") + { + module.exports = factory; + } + else if (typeof define === "function") // AMD/CMD/Sea.js + { + if (define.amd) { // for Require.js + + define(["editormd"], function(editormd) { + factory(editormd); + }); + + } else { // for Sea.js + define(function(require) { + var editormd = require("../../editormd"); + factory(editormd); + }); + } + } + else + { + factory(window.editormd); + } + +})(); \ No newline at end of file