URLから画像をアップロードしてBootstrap-wysihtml5エディタを拡張するには？

Question

私は現在、編集可能な領域にBootstrap-wysihtml5テキストエディタを使用しています。今、私はエディタに画像アップロード機能を追加したいと思います。しかし、画像のソースはURLのみでなければなりません。

エディタの画像挿入領域に新しい画像リンクを挿入すると、

1. それは、私はすべてがOKならば、私は私のS3バケットに

それをアップロードしますMIMEタイプなど

、それはサイズのためにダウンロードした画像を確認する必要があります私のサーバー

に画像をダウンロードしてくださいすでにコード化された番号2と3しかし、私は番号1を処理することはできません。挿入するためにクリックするとURLイメージのアップロードのためのwysihtml5エディタをトリガする方法？

誰かここでそれをしました：https://github.com/bassjobsen/wysihtml5-image-uploadしかし、それは伝統的なアップロードを使用します。すべてのURLからではありません。

参照のデモ：http://www.w3masters.nl/bootstrap-wysihtml5/

---

私は、アップロード機能を実装したいだけURLから。スクリプトを開始する前に何をすべきですか？初心者のjavascriptコーダーには数日かかりますか？

たとえば、stackoverflowの画像機能のサポートWebからのリンク。それについてのアイデアや情報源はありますか？上記画像を

新しい画像を挿入することができますが、あなたのサーバー上でそのイメージを格納することはできません。 （http://jhollingworth.github.io/bootstrap-wysihtml5/で右端のボタンを使用します。この機能は、すでにここにありますhttp://jhollingworth.github.io/bootstrap-wysihtml5/

Answer 1

を：私はここに

アップロード機能なしURL機能からの挿入画像を見ることができるURLから画像を挿入した後、画像ソースは、自分のドメインである必要がありますツールバー）。

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/