javascript - ckeditor - 获取最后的光标位置并在该 Angular 5 处附加 html

Question

1. 我在 Angular 5 中使用 "ngx-ckeditor": "^0.4.0"。

2. 这是我的html代码

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

3. 这是我的组件代码

   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. 在您的 html 指令中添加模糊事件

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

2. 然后在你的组件中添加函数

   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. 您好，世界!在 CkEditor 中的最后一个光标位置添加文本。