Angular 4-TinyMCE图片上传

Question

在我的Angular 4应用中，我无法在TinyMCE内部进行任何图像上传工作。 通用图片插件无法正常运行。 如果可以指定POST URL，我将对非常简单的上传窗口感到满意（+希望使用application / octet-stream'，但格式也可以）。

我已经在我的应用程序中成功使用了ng2-file-upload ，但是TinyMCE不支持打字稿，因此我无法在其中使用它。

有人成功通过Angular 4为TinyMCE实现了图片上传吗？

Answer 1

设法找到一种最终使用ng2-file-upload的方法。 以下代码是Editor组件的一部分，在其中我为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();
          }
        });
      },
.....
}

它不是很花哨，只需在单击时打开文件选择器，然后上传（需要将上传器设置为自动上传），但这对我来说已经足够了。