Angular 2 Rc1中如何处理点击Ckeditor工具栏上的自定义按钮事件？

Question

我使用以下代码在工具栏上添加了一个新按钮：

demo.html

<ck-editor>ckeditor_inst_1</ck-editor>

demo.ts

import {
  Component,
  Inject,
  OnInit,
  ElementRef,
  Renderer,
  ViewQuery,
  ViewChild,
  AfterContentInit
} from '@angular/core';

@Component({
  selector: 'ck-editor',
  template: ''
})

class CKEditor {
  constructor(_elm: ElementRef) {
    CKEDITOR.replace(_elm.nativeElement);
  }
}

@Component({
  selector: 'demo',
  templateUrl: 'client/dev/demo/demo.html'
})

export class DemoComponent implements OnInit,AfterContentInit {
  constructor(){
  }

   CreateUploadImageCkeditor(){
    CKEDITOR.instances.editor1.ui.addButton('Hello',
      {
        label: 'Upload Image',
        command: 'uploadImage',
        icon: window.location.href +'/uploads/Up.png'
      });

  }

  ngOnInit() {
    this.CreateUploadImageCkeditor();
  }

}

我想在用户单击我的自定义按钮时执行某些操作。我如何处理点击我的自定义按钮的事件？感谢您的任何帮助。

Answer 1

这与 CKEditor 的关系比与 Angular2 的关系更大。尽管如此：

将NgZone 添加到您的构造函数

class CKEditor {
    constructor(private _zone: NgZone, _elm: ElementRef) {
        CKEDITOR.replace(_elm.nativeElement);
    }
}

创建按钮：

editorInstance.ui.addButton('MyButton', {
    label: 'My Button',
    command: 'mycommand',
    toolbar: 'basicstyles'
});

重要的是命令名mycommand.

创建命令。单击按钮时会调用此函数：

editorInstance.addCommand('mycommand', {
    exec: (editor) => {
        this._zone.run(() => {
            // Your Angular code goes here.
        });
    }
});

Angular 2 Rc1中如何处理点击Ckeditor工具栏上的自定义按钮事件？

how to handle event click the custom button on toolbar of Ckeditor in Angular 2 Rc1?

ckeditor

angular