ckeditor - get last cursor position and append html at that Angular 5

Question

1. i am using "ngx-ckeditor": "^0.4.0" in angular 5.

2. here is my html code

   <ck-editor #ckeditor name="html_template" (click)="getCaretPos(ckeditor)" (change)="ckEditorChange(ckeditor)" [(ngModel)]="mailModel.html_template" [config]="ckEditorConfig">
   </ck-editor>
   

3. here is my component code

   this.ckEditorConfig = {
       on: {
           instanceReady: function(e) {
               const pos = e.document.selection.getFirstPosition();
               var selection = e.editor.getSelection();
               var range = selection.getRanges()[0];
               var cursor_position = range.startOffset;
             }
       }
   };
   

with this code i am not able to get Cursor's last position & don't know how to append html in it?

Answer 1

1. add blur event in your html directive

   <ck-editor #ckeditor name="html_template" (blur)="ckEditorFocusOut($event)" [(ngModel)]="mailModel.html_template" [config]="ckEditorConfig">
   

2. after that add function in your component

   public ckEditorFocusOut(event) {
       var selection = event.editor.getSelection();
       var ranges = selection.getRanges();
       var range = ranges[0];
   
       var newRange = event.editor.createRange();
   
       var moveToEnd = true;
       newRange.moveToElementEditablePosition(range.endContainer, moveToEnd);
   
       var newRanges = [newRange];
       selection.selectRanges(newRanges);
   
       event.editor.insertHtml("<span>Hello World!</span>");
   }
   

3. Hello World! text add at last cursor position in CkEditor.