Q

如何通過URL從圖像上傳擴展Bootstrap-wysihtml5編輯器？

2017-02-25 19 views 0 likes

0

我目前在我的可編輯區域上使用Bootstrap-wysihtml5文本編輯器。現在我想添加圖片上傳功能到我的編輯器。但圖片的來源應該只有網址。如何通過URL從圖像上傳擴展Bootstrap-wysihtml5編輯器？

當我插入新的圖像鏈接到編輯器的圖像插入區域;

應該下載圖像到我的服務器
應該檢查尺寸下載圖像，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/

2017-02-25 hakiko

A

回答

1

可以使用此功能已經在這裏：http://jhollingworth.github.io/bootstrap-wysihtml5/（在使用最右邊的按鈕工具欄）。

2017-02-25 22:37:19

+0

它得到鏈接從它的來源。我想獲取該圖像，然後將該圖像存儲在我的Amazon S3存儲桶中 – hakiko

+0

這需要服務器端代碼，所以我的建議是使用AJAX。當插入圖片時，javascript代碼應該發送一個帶有原始URL的AJAX請求到你的服務器。服務器將從URL下載圖像，將其上傳到存儲提供商，並在服務器上返回一個新的URL作爲響應。 Bootstrap-wysihtml5應該在響應中使用URL，而不是將圖像插入到字段中。 –

0

試試這個

$($('.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/

2017-07-07 07:02:41

相關問題