kindeditor粘贴时自动同步上传图片，自动同步上传截图

原文博客及下载地址：kindeditor粘贴时自动同步上传图片，自动同步上传截图。

体验地址：富文本编辑器Kindeditor升级版Kindeditor-plus体验。

以复制粘贴微信文章为例，效果如下图所示：

核心代码如下，在kindeditor创建时添加如下配置，其中上传图片接口请改成我们自己的接口：

 afterCreate: function () {
        var editorObj = this;
        var doc = editorObj.edit.doc;
        $(doc.body).bind('paste', function (event) {
          var cbd = event.originalEvent.clipboardData;
          var ua = window.navigator.userAgent;
          if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
            cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
            //不处理
          } else {
            for (var i = 0; i < cbd.items.length; i++) {
              var item = cbd.items[i];
              if (item.kind == "file" && item.type.indexOf("image") > -1) {
                var blob = item.getAsFile();
                if (blob.size > 0) {
                  // 上传粘贴板中的截图到服务器
                  var form = document.imgForm;
                  var formData = new FormData(form);
                  formData.append("file", blob);
                  var loading = layer.load(1, {shade: 0.3});
                  $.ajax({
                    type: "POST",
                    url: editorObj.uploadMultiImgUrl,
                    data: formData,
                    dataType: "json",
                    async: false,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                      layer.close(loading);
                      if (res.success) {
                        var imgStr = '<img src="' + res.data.url + '" title="' + res.data.name + '" alt="' + res.data.name + '"/>';
                        editorObj.insertHtml(imgStr);
                      }
                    }
                  });
                }
              }
            }
          }
          setTimeout(function () {
            // 处理bug
            var useless = $(doc.body).find(".__kindeditor_paste__");
            if (useless) {
              useless.removeAttr("style");
              useless.removeClass("__kindeditor_paste__");
            }
            var imgs = $(doc.body).find("img");
            var compelete = imgs.length;
            var layerindex;
            if (compelete > 0) {
              // 转存时加载弹出层，这里用的是layer
              layerindex = layer.load(1, {
                shade: [0.3, '#fff'],
                content: '网络图片转存中...',
                success: function (layero) {
                  layero.find('.layui-layer-content').css({
                    'padding-top': '39px',
                    'width': '120px',
                    'margin-left': '-60px'
                  });
                }
              });
            }
            $.each(imgs, function (index, item) {
              var _that = $(this);
              var imgSrc = decodeURIComponent(_that.attr("src"));
              if (imgSrc.indexOf("file://") > -1) {//用户本地图片
                // 上传本地图片，暂无
                compelete--;
                if (compelete === 0) {
                  layer.close(layerindex);
                }
              } else if (imgSrc.indexOf("/pub/") === -1) {//根据uri简略判断是不是本网站的图片，请自行更改判断规则
                // ajax异步上传其他网络图片，ajax写法请自从更改
                $.postPayload(ctx + "/admin/attachment/uploadAttaForWebUrl", {url: imgSrc}, function (res) {
                  compelete--;
                  if (compelete === 0) {
                    layer.close(layerindex);
                  }
                  if (res.success) {
                    // 重置图片
                    _that.attr('src', res.data.url);
                    _that.attr('data-ke-src', res.data.url);
                    _that.attr('alt', res.data.name);
                  }
                })
              } else {
                // 本站网络图片不处理
                compelete--;
                if (compelete === 0) {
                  layer.close(layerindex);
                }
              }
            });
          }, 0);
        });
      },