Angular 4 - TinyMCE圖片上傳

在我的Angular 4應用程序中，我無法在TinyMCE中進行任何圖片上傳工作。一般圖像插件無法正常工作。如果我可以指定POST URL，我會非常高興simple upload window（+會更喜歡application/octet-stream，但表單也可以）。Angular 4 - TinyMCE圖片上傳

我已經在我的應用程序中成功使用了 ng2-file-upload，但TinyMCE不支持打字稿，所以我無法在那裏使用它。

任何成功實現TinyMCE與Angular 4的圖像上傳的人都可以參與嗎？

來源

2017-07-18 BadHabits

''我已經在我的應用程序中成功地使用了ng2-file-upload，但TinyMCE不支持打字稿，因此我無法在那裏使用它。」 - TinyMCE在瀏覽器中運行，並且沒有瀏覽器可以實際運行TypeScript。在傳送到Web瀏覽器之前，它們都會被編譯爲JavaScript。 –

@MichaelFromin我的意思是，我不能只使用自定義按鈕，並在html下的editor.windowManager.open：使用Angular和利用打字稿。 – BadHabits

最終找到了如何使用ng2-file-upload的方法。以下代碼是編輯器組件的一部分，我定義了tinyMCE的東西。我只會展示最重要的部分。

HTML：

<textarea id="{{elementId}}"></textarea> 
<input id='input' type="file" #fileInput ng2FileSelect [uploader]="uploadFile.uploader" style="display: none;" 
     accept="image/png,image/gif,image/jpeg"/>

打字稿：

ngOnInit() { 
    this.uploadFile.uploader.onCompleteItem = (item: any, response: string, status: any, headers: any) => { 
    .... 
      tinymce.activeEditor.insertContent('<img src="' + location + '"/>'); 
.... 
    }; 
    } 

ngAfterViewInit() { 

    tinymce.init({ 
..... 
setup: editor => { 
     this.editor = editor; 
     editor.on('keyup',() => { 
      const content = editor.getContent(); 
      this.onEditorKeyup.emit(content); 
     }); 
     editor.on('reset', function(e) { 
      editor.setContent(''); 
     }); 
     editor.addButton('mybutton', { 
      text: 'Image', 
      icon: 'image', 
      onclick: function() { 
      var input = document.getElementById('input'); 
      input.click(); 
      } 
     }); 
     }, 
..... 
}

不是很花哨，只是打開文件選擇器上單擊，然後上傳（需要設置上傳到autoupload），但它是足夠的我。「

來源

2017-07-20 21:54:11 BadHabits

Angular 4 - TinyMCE圖片上傳

回答

相關問題