Question

我有一个页面，里面有ckeditor。我使用ng2-ckeditor和ngx-modal。这是我的模板：

<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。如果我们尝试在函数this.uploadModal中打印出ngAfterViewInit()，它会给出正确的值，我们可以在那里打开对话框。

如何在函数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/%27this%27-in-TypeScript

Angular2：在ng2-ckeditor中覆盖img命令

1 个答案: