Angular 4 - TinyMCE 图片上传

Question

在我的 Angular 4 应用程序中，我无法在 TinyMCE 中上传任何图片。通用图像插件无法正常工作。如果我可以指定 POST URL（+ 更喜欢 application/octet-stream' 但形式也可以），我会很高兴 simple upload window。

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

有人成功地使用 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();
          }
        });
      },
.....
}

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

Angular 4 - TinyMCE 图片上传

Angular 4 - TinyMCE image upload

tinymce

image-uploading

angular