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

【问题标题】：How to extend Bootstrap-wysihtml5 editor with image upload from URL?如何通过从 URL 上传图像来扩展 Bootstrap-wysihtml5 编辑器？
【发布时间】：2017-02-25 22:34:19
【问题描述】：

我目前在我的可编辑区域上使用 Bootstrap-wysihtml5 文本编辑器。现在我想在我的编辑器中添加图片上传功能。但图片的来源只能是 URL。

当我将新图片链接插入到编辑器的图片插入区域时；

它应该将图像下载到我的服务器
它应该检查下载的图像的大小、mime 类型等
如果一切正常，我会将其上传到我的 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/

【问题讨论】：

标签： jquery twitter-bootstrap upload image-uploading wysihtml5

【解决方案1】：

此功能已在此处提供：http://jhollingworth.github.io/bootstrap-wysihtml5/（使用工具栏中最右侧的按钮）。

【讨论】：

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

【解决方案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/

【讨论】：