0

我有一个页面，里面有 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？预先感谢。

4

1 回答 1

0

我认为这些选项中的任何一个都应该适合您，因为这样上下文将被引用到您的组件实例：

1) 绑定

一个）

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();
};

也可以看看

于 2017-04-25T04:03:39.980 回答