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图片上传

回答

相关问题