代码之家 › 专栏 › 技术社区 › BadHabits

角度4-TinyMCE图像上传

image-uploading tinymce angular

0

BadHabits · 技术社区 · 9 年前

simple upload window

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

有谁成功地用Angular 4为TinyMCE实现了图像上传?

1 回复 | 直到 9 年前

1

BadHabits 9 年前

最终设法找到了使用ng2文件上传的方法。下面的代码是编辑器组件的一部分,我在其中定义了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();
          }
        });
      },
.....
}