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

这与Cularditor的关系比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工具栏上的自定义按钮？

1 个答案: