TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
editormd,Markdown编辑器Editor.md图片粘贴插入插件的开发
3961
人阅读
2018/12/23 17:21
总访问:
3996946
评论:
0
收藏:
0
手机
分类:
前端
Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便,不能像其他编辑器一样粘贴插入图片,就着手为自己的编辑器加了这个功能,在这里分享给有需要的朋友。 *此文章代码仅供参考。用于开发环境时可根据自己需要进行修改。 >插件使用方法:使用截图工具截图保存之后,在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。 ####1.创建插件文件 在plugins目录下创建 image-handle-paste/image-handle-paste.js文件。 ![](https://img.tnblog.net/arcimg/aojiancc2/9802322821054064919c3431114950ad.png) ####2.插件的内容 这个方法里面是将粘贴板的图片添加到一个FormData里面,然后使用ajax进行提交上传的,上传完成调编辑器自带的图片dialog进行插入。里面预留了blob对象和base64格式的图片方法,根据自己需求自取。 ``` /*! * editormd图片粘贴上传插件 * * @file image-handle-paste.js * @author codehui * @date 2018-11-07 * @link https://www.codehui.net */ (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; //判断图片类型 if (items && items[0].type.indexOf('image') > -1) { var file = items[0].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"); // 文件 _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, "dateType": "json", "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); } })(); ``` >后端接收file方法为$_FILES['editormd-image-file'] 默认返回数据格式(修改_ajax方法回调即可) ``` { success : 0 | 1, // 0 表示上传失败,1 表示上传成功 message : "提示的信息,上传成功或上传失败及错误信息等。", url : "图片地址" // 上传成功时才返回 } ``` ####3.页面引用插件 ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>editormd图片粘贴上传插件</title> <link rel="stylesheet" href="../css/editormd.css" /> </head> <body> <div id="test-editormd"> <textarea style="display:none;"></textarea> </div> <script src="js/jquery.min.js"></script> <script src="../editormd.js"></script> <script type="text/javascript"> var testEditor = editormd("test-editormd", { path: '../lib/', imageUpload: true, //开启图片上传 imageUploadURL: '/logic/upload', //图片上传后台地址 onload: function() { // 引入插件 执行监听方法 editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){ testEditor.imagePaste(); }); } }); </script> </body> </html> ``` ####4.插件的引用方法 插件引用有三种方法都可以用。 第一种 editormd.loadPlugin('插件文件路径','回调函数') ``` editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){ testEditor.imagePaste(); }); ``` 第二种: ``` //引入插件 <script src="../plugins/image-handle-paste/image-handle-paste.js"></script> //使用 testEditor.imagePaste(); ``` 第三种: editormd.loadPlugin("要执行的插件方法名",插件地址) ``` this.executePlugin("imagePaste", "image-handle-paste/image-handle-paste"); ``` 原文地址:https://www.codehui.net/info/39.html
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}