没有使用过Editor.md的朋友请移步 https://github.com/pandao/editor.md

插件使用方法：使用截图工具截图保存之后，在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。

1. 创建插件文件

在plugins目录下创建 image-handle-paste/image-handle-paste.js文件。

2. 插件的内容

这个方法里面是将粘贴板的图片添加到一个FormData里面，然后使用ajax进行提交上传的，上传完成调编辑器自带的图片dialog进行插入。里面预留了blob对象和base64格式的图片方法，根据自己需求自取。

  1. /*!
  2.  * editormd图片粘贴上传插件
  3.  *
  4.  * @file   image-handle-paste.js
  5.  * @author codehui
  6.  * @date   2018-11-07
  7.  * @link   https://www.codehui.net
  8.  */
  10. (function() {
  12.     var factory = function (exports) {
  13.         var $            = jQuery;           // if using module loader(Require.js/Sea.js).
  14.         var pluginName   = "image-handle-paste";  // 定义插件名称
  16.         //图片粘贴上传方法
  17.         exports.fn.imagePaste = function() {
  18.             var _this       = this;
  19.             var cm          = _this.cm;
  20.             var settings    = _this.settings;
  21.             var editor      = _this.editor;
  22.             var classPrefix = _this.classPrefix;
  23.             var id          = _this.id;
  25.             if(!settings.imageUpload || !settings.imageUploadURL){
  26.                 console.log('你还未开启图片上传或者没有配置上传地址');
  27.                 return false;
  28.             }
  30.             //监听粘贴板事件
  31.             $('#' + id).on('paste', function (e) {
  33.                 var items = (e.clipboardData || e.originalEvent.clipboardData).items;
  35.                 //判断图片类型
  36.                 if (items && items[0].type.indexOf('image') > -1) {
  38.                     var file = items[0].getAsFile();
  40.                     /*生成blob
  41.                     var blobImg = URL.createObjectURL(file);
  42.                     */
  44.                     /*base64
  45.                     var reader = new FileReader();
  46.                     reader.readAsDataURL(file);
  47.                     reader.onload = function (e) {
  48.                         var base64Img = e.target.result //图片的base64
  49.                     }
  50.                     */
  52.                     // 创建FormData对象进行ajax上传
  53.                     var forms = new FormData(document.forms[0]); //Filename
  54.                     forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件
  56.                     _this.executePlugin("imageDialog", "image-dialog/image-dialog");
  58.                     _ajax(settings.imageUploadURL, forms, function(ret){
  59.                         if(ret.success == 1){
  60.                             $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
  61.                             //cm.replaceSelection("![](" + ret.url  + ")");
  62.                         }
  63.                         console.log(ret.message);
  64.                     })
  65.                 }
  66.             })
  67.         };
  68.         // ajax上传图片 可自行处理
  69.         var _ajax = function(url, data, callback) {
  70.             $.ajax({
  71.                 "type": 'post',
  72.                 "cache": false,
  73.                 "url": url,
  74.                 "data": data,
  75.                 "dateType": "json",
  76.                 "processData": false,
  77.                 "contentType": false,
  78.                 "mimeType": "multipart/form-data",
  79.                 success: function(ret){
  80.                     callback(JSON.parse(ret));
  81.                 },
  82.                 error: function (err){
  83.                     console.log('请求失败')
  84.                 }
  85.             })
  86.         }
  87.     };
  89.     // CommonJS/Node.js
  90.     if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  91.     { 
  92.         module.exports = factory;
  93.     }
  94.     else if (typeof define === "function")  // AMD/CMD/Sea.js
  95.     {
  96.         if (define.amd) { // for Require.js
  98.             define(["editormd"], function(editormd) {
  99.                 factory(editormd);
  100.             });
  102.         } else { // for Sea.js
  103.             define(function(require) {
  104.                 var editormd = require("./../../editormd");
  105.                 factory(editormd);
  106.             });
  107.         }
  108.     } 
  109.     else
  110.     {
  111.         factory(window.editormd);
  112.     }
  114. })();

后端接收file方法为$_FILES['editormd-image-file']

默认返回数据格式(修改_ajax方法回调即可)

  1. {
  2.     success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
  3.     message : "提示的信息，上传成功或上传失败及错误信息等。",
  4.     url     : "图片地址"        // 上传成功时才返回
  5. }

3. 页面引用插件

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>editormd图片粘贴上传插件</title>
  6.         <link rel="stylesheet" href="../css/editormd.css" />
  7.     </head>
  8.     <body>
  9.         <div id="test-editormd">
  10.             <textarea style="display:none;"></textarea>
  11.         </div>
  12.         <script src="js/jquery.min.js"></script>
  13.         <script src="../editormd.js"></script>
  14.         <script type="text/javascript">
  15.             var testEditor = editormd("test-editormd", {
  16.                 path: '../lib/',
  17.                 imageUpload: true, //开启图片上传
  18.                 imageUploadURL: '/logic/upload', //图片上传后台地址
  19.                 onload: function() {
  20.                     // 引入插件 执行监听方法
  21.                     editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
  22.                         testEditor.imagePaste();
  23.                     });
  24.                 }
  25.             });
  26.         </script>
  27.     </body>
  28. </html>

效果预览

代码汇

4. 插件的引用方法

插件引用有三种方法都可以用。

  • 第一种

    editormd.loadPlugin('插件文件路径','回调函数')

  1. editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
  2.     testEditor.imagePaste();
  3. });
  • 第二种
  1. //引入插件
  2. <script src="../plugins/image-handle-paste/image-handle-paste.js"></script>
  3. //使用
  4. testEditor.imagePaste();
  • 第三种

editormd.loadPlugin("要执行的插件方法名",插件地址)

  1. this.executePlugin("imagePaste", "image-handle-paste/image-handle-paste");