ckeditor

Question

我正在使用 "ngx-ckeditor": "^0.4.0" in angular 5.

这是我的html代码

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

这是我的组件代码

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

在您的 html 指令中添加模糊事件

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

然后在您的组件中添加功能

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>");
}

您好，世界！在 CkEditor 中的最后一个光标位置添加文本。

ckeditor - 获取最后一个光标位置并在 Angular 处追加 html 5

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

javascript

angular

angular5