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

来源:原创 发布时间:2020-04-18 10:12:47 作者:Mos 阅读量:1790

源码下载请至:https://i847.cn/article/3032.html

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



核心代码如下,在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);
        });
      },



转载请注明出处:文思齐远博客,如果对您有帮助,请帮忙点一下右侧的广告,谢谢您了!
支付宝打赏 微信打赏

我要评论

网友评论


评论时间:2020-04-17 15:25:06

厉害

猜你想搜

实时天气

©2020 i847.cn
部分内容转自网络,如有损害您的权益,致邮联系:jiang2008wen#126.com,一经证实,立即删除!    我要留言
备案号:蜀ICP备18020563号-1