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 中的最后一个光标位置添加文本。