ckeditor - получить последнюю позицию курсора и добавить HTML в этот Angular 5 - PullRequest
Новая
       19

ckeditor - получить последнюю позицию курсора и добавить HTML в этот Angular 5

0 голосов
/ 16 февраля 2019
  1. я использую "ngx-ckeditor": "^ 0.4.0" в угловых 5.

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

с этим кодом я не могу получить последнюю позицию Курсора и донаНе знаете, как добавить в него HTML?

1 Ответ

0 голосов
/ 18 февраля 2019

  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. Hello World!добавление текста в последнюю позицию курсора в CkEditor.

...