Angular2:NG2-CKEDITOR中的IMG命令

Question

我有一个页面，其中包含ckeditor。我使用ng2-ckeditor和ngx模式。这是我的模板：

<div>
    <ckeditor 
        id="questionContent"
        name="questionContent"
        [(ngModel)]="question.content" 
        (change)="onChange($event)" 
        (ready)="onReady($event)"
        (focus)="onFocus($event)" 
        (blur)="onBlur($event)" debounce="500">
    </ckeditor>
</div>
....//Some stuff there
<!--Modal-->
<modal #uploadModal [closeOnEscape]="false" [closeOnOutsideClick]="false">
    <modal-header>
        <h4 class="modal-title pull-left">{{ 'QUESTIONS' | translate }}</h4>
    </modal-header>
    <modal-content>
        <div class="drag-n-drop-container"
            ngFileDrop
            [options]="options"
            (onUpload)="handleUpload($event)"
            [ngClass]="{'file-over': hasBaseDropZoneOver}"
            (onFileOver)="fileOverBase($event)">
        <h1>Drag & Drop</h1>
        <label class="upload-button">
            <input type="file"
                class="hidden"
                ngFileSelect
                [options]="options"
                (onUpload)="handleUpload($event)">
            Browse
        </label>
        </div>
    </modal-content>
    <modal-footer>
        <button class="btn btn-default pull-right cancel" (click)="uploadModal.close()">
            <i class="fa fa-times"></i>
            {{ 'BUTTON_CLOSE' | translate }}</button>
    </modal-footer>
</modal>

我的情况是尝试覆盖ckeditor的图像对话框。因此，在我的组件中，我将这样做：

import {
  Component, OnInit, ViewChild, ViewChildren, AfterViewChecked,
  AfterViewInit, Renderer, QueryList, ViewEncapsulation
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Modal } from 'ngx-modal';
import { CKButtonDirective, CKEditorComponent } from 'ng2-ckeditor';
declare var CKEDITOR: any;
@Component({
  selector: 'question-edit',
  templateUrl: './question-edit.component.html',
  styleUrls: [
    './question-edit.style.css'
  ],
  encapsulation: ViewEncapsulation.None
})
export class EditQuestionComponent implements OnInit, AfterViewChecked, AfterViewInit {
  @ViewChildren('answers') answerInputs: QueryList<any>;
  @ViewChild('uploadModal') public uploadModal: Modal;
  private editor: any;
  constructor(private rd: Renderer) { }
  ngOnInit() {
  };
  registerCKEditorCommands(editor: any, uploadModal: Modal) {
    let self = this;
    editor.addCommand("image", {
      exec: self.onUploadImage
    });
  };
  ngAfterViewInit() {
    let self = this;
    setTimeout(function () {
      for (var instanceName in CKEDITOR.instances) {
        self.editor = CKEDITOR.instances[instanceName];
        self.editor.on("instanceReady", function (ev: any) {
          let _editor = ev.editor;
          self.registerCKEditorCommands(_editor, self.uploadModal);
        });
      }
    });
  };
  onUploadImage(editor: any) {
    this.uploadModal.open();
  };
}

所有工作正常，除非我单击CKEditor工具栏中的图像按钮。它将调用函数onUploadImage()，但this.uploadModal是undefined。如果我们尝试在功能ngAfterViewInit()中打印 this.uploadModal，则可以提供正确的值，并且可以在此处打开对话框。

如何处理函数onUploadImage中的打开对话框？预先感谢。

Answer 1

我认为这些选项中的任何一个都应适合您，因为这种方式将引用您的组件实例：

1(绑定

a(

editor.addCommand("image", {
  exec: this.onUploadImage.bind(this)
});

b(

export class EditQuestionComponent {
  constructor() {
    this.onUploadImage = this.onUploadImage.bind(this);
  }
  ...
  editor.addCommand("image", {
    exec: this.onUploadImage
  });

2(箭头功能

editor.addCommand("image", {
  exec: (editor) => this.onUploadImage(editor)
});

3(实例箭头功能

editor.addCommand("image", {
  exec: this.onUploadImage
});
...
onUploadImage = (editor: any) => {
  this.uploadModal.open();
};

另请参见

• https://github.com/microsoft/typescript/wiki/'this'-in-typescript