URL에서 이미지 업로드로 Bootstrap-wysihtml5 편집기를 확장하는 방법은 무엇입니까?

Question

편집 가능한 영역에서 현재 Bootstrap-wysihtml5 텍스트 편집기를 사용하고 있습니다. 이제 편집자에게 이미지 업로드 기능을 추가하고 싶습니다. 하지만 이미지 원본은 URL이어야합니다.

편집자의 이미지 삽입 링크에 새 이미지 링크를 삽입하면;

1. 그것은 내 서버
2. 에 이미지를 다운로드해야 그것은 크기 다운로드 한 이미지, MIME 종류 등을 확인해야
3. 확인 모든 것을, 나는 내 S3 버킷

I에 업로드됩니다 이미 2와 3으로 코드화되어 있지만 숫자 1을 처리 할 수 ​​없습니다. 삽입 할 때 URL 이미지 업로드를 위해 wysihtml5 편집기를 트리거하는 방법은 무엇입니까?

여기 누군가가 : https://github.com/bassjobsen/wysihtml5-image-upload그러나 전통적인 업로드를 사용합니다. 모든 URL이 아닙니다.

참조 데모 : http://www.w3masters.nl/bootstrap-wysihtml5/

---

나는 업로드 기능 만 URL에서 구현하고자합니다. 스크립팅을 시작하기 전에 무엇을해야합니까? 초보자 자바 스크립트 코더에 며칠, 몇 주가 걸립니까?

예를 들어 stackoverflow의 이미지 기능 지원 웹에서 링크. 그것에 대해 어떤 생각이나 근원이 있습니까? 위의 이미지에

당신은 새로운 이미지를 삽입 할 수 있습니다하지만 당신은 서버에 해당 이미지를 저장할 수 없습니다. (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/