Angular 4- TinyMCE图片上传

Question

在我的Angular 4应用程序中，我无法在TinyMCE中进行任何图像上传。常规图像插件不能正常工作。如果我可以指定POST URL (+更喜欢应用程序/八位字节流‘，但表单也可以)，我会很高兴使用非常simple upload window。

我已经在我的应用程序中成功地使用了ng2-file-upload，但是TinyMCE不支持typescript，所以我无法在那里使用它。

有谁用Angular 4成功地实现了TinyMCE的图片上传？

Answer 1

最终我找到了一种使用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();
          }
        });
      },
.....
}

这不是很花哨，只是在点击打开文件选择器，然后上传(需要设置上传程序为自动上传)，但这对我来说已经足够了。