Add a custom button | CK Editor Angular 2

Question

I am trying to add custom button in CKEditor. I am using this CKEditor ng2-ckeditor. It is working fine. but I want to add a button. on clicking this button will add a rails template tag

Example:

I can add the button like example below, but I don't know how to write its method. that will insert <%= sender_name %> tag on the current position of text in CKEditor.

<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckbutton [name]="'saveButton'"
      [command]="'saveCmd'"
      (click)="save($event)"
      [icon]="'save.png'"
      [label]="'Save Document'"
      [toolbar]="'clipboard,1'">
    </ckbutton>
</ckeditor>

please help me. how can I do that in angular2 typescript.

Answer 1

Finally I found the solution. and it is quite easy. very easy.

in ckeditor.component.html

<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckbutton [name]="'saveButton'"
      [command]="'insert_name'"
      (click)="insert_name($event)"
      [icon]="'./path/to/icon.png'"
      [label]="'Insert User Name'"
      [toolbar]="'clipboard,1'">
    </ckbutton>
</ckeditor>

ckeditor.component.ts

insert_name(event){
  event.insertText("#{user_name}");
}