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

Question

我目前在我的可编辑区域上使用Bootstrap-wysihtml5文本编辑器。现在我想添加图片上传功能到我的编辑器。但图片的来源应该只有网址。

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

1. 应该下载图像到我的服务器
2. 应该检查尺寸下载图像，MIME类型等
3. 如果一切正常的话，我将它上传到我的S3存储

我已经编码2和3，但我不能处理1号。当我点击插入时如何触发wysihtml5编辑器的URL图像上传？

有人在这里做到了：https://github.com/bassjobsen/wysihtml5-image-upload但是它使用传统上传。不是从任何网址。

观看演示：http://www.w3masters.nl/bootstrap-wysihtml5/

---

我要实现上传功能，但是从URL只。在开始脚本之前我应该​​怎么做？初学者JavaScript编码器需要几天或几周的时间？

例如stackoverflow的图像功能支持从网络链接。你有什么想法或来源？

上面的图片，你可以插入新的形象，但你不能说图像存储在服务器上。图片来源应该是我自己的域名后，我插入图像从URL

在这里你可以看到从URL功能插入图像，而不上传功能：http://jhollingworth.github.io/bootstrap-wysihtml5/

Answer 1

可以使用此功能已经在这里：http://jhollingworth.github.io/bootstrap-wysihtml5/（在使用最右边的按钮工具栏）。

Answer 2

试试这个

$($('.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]); 
      }); 

https://jsfiddle.net/surajmahajan007/2yu456nw/