Jquery 如何通过从URL上传图像来扩展Bootstrap-wysihtml5编辑器？

我目前正在可编辑区域使用Bootstrap-wysihtml5文本编辑器。现在我想添加图像上传功能到我的编辑器。但图像的源应该是URL

当我插入新的图像链接到编辑器的图像插入区域

它应该下载图像到我的服务器

它应该检查下载的图像的大小，mime类型等

如果一切正常，那么我将把它上传到我的S3存储桶

我已经编码了2号和3号，但我不能处理1号。当我点击插入时，如何触发所见即所得的HTML5编辑器来上传URL图像

这里有人这么做：但是它使用传统的上传方式。不是从任何url

请参见演示：

---

我想实现上传功能，但只从URL。在开始编写脚本之前，我应该做什么？对于javascript初学者来说，需要几天、几周的时间吗

例如，stackoverflow的图像功能支持web链接。你对此有什么想法或消息来源吗

在上面的图像上，您可以插入新图像，但不能将该图像存储在服务器上。从URL插入图像后，图像源应该是我自己的域

---

在这里，您可以看到“从URL插入图像”功能，但没有上载功能：

此功能已在此处可用：（使用工具栏中最右边的按钮）。

尝试此功能

$($('.wysihtml5-sandbox').contents().find('body')).on("drop", function(event) {
              event.preventDefault();  
              event.stopPropagation();
               var dt = event.originalEvent.dataTransfer;
                        var files = dt.files;

              var reader = new FileReader();
              reader.onload = function (e) {
                    debugger;
                  var data = this.result;
                  vm.composer.commands.exec('insertImage',e.target.result);
              }
              reader.readAsDataURL( files[0] );
          });

---

它从其来源获取链接。我希望获得该图像，然后将其存储在我的AmazonS3 Buckett上。这需要服务器端代码，因此我建议使用AJAX。在插入图像时，javascript代码应该向服务器发送一个带有原始URL的AJAX请求。服务器将从URL下载图像，将其上载到存储提供商，并在服务器上返回一个新URL作为响应。Bootstrap-wysihtml5应该在响应中使用URL，而不是将图像插入字段。