Question

在我的Angular 4应用程序中，我无法在TinyMCE内部进行任何图像上传工作。一般图像插件无法正常工作。如果我可以指定POST URL（+更喜欢application / octet-stream'，但形式也可以），我会非常满意simple upload window。

我已成功使用已经在我的应用中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();
          }
        });
      },
.....
}

它不是很花哨，只需点击然后上传就打开文件选择器（需要设置上传器以进行自动加载）但这对我来说已经足够了。

Angular 4 - TinyMCE图像上传

1 个答案: