Cursor position in quill Editor

Question

I am using Angular 7 with quill editor. Use case: I have quill editor and need to append some text on double click on any button, getting the value of double click but not able to get the cursor position inside the quill editor.

I tried with (onContentChanged), (onEditorCreated) and (onSelectionChanged) and also tried with onFocus, as I have to use multiple quill editor in a single template.

Need to append the text on focused editor only but on cursor position only.

here is my code sample

<quill-editor #editor [maxLength]="maxLength"
          [minLength]="minLength"
          [modules]="quillConfig"
          [(ngModel)]="text"
          (onContentChanged)="contentchanged($event)"
          (onEditorCreated)="editorCreated($event)"
          [placeholder]="placeholder"
          [readOnly]="readonly"
          [required]="required"
          [style]="{height: height}"
          (onSelectionChanged)="onFocus($event)">

score 7 · Accepted Answer · answered Nov 27 '19 at 05:33

You can do this using the insertText method of quill editor. Here is a simple implementation that inserts ABCD at cursor position:

const selection = this.editor.getSelection(); // get position of cursor (index of selection)
this.editor.insertText(selection.index, 'ABCD'); // insert text into the cursor position

Full example: https://stackblitz.com/edit/angular-ffkfhp

Cursor position in quill Editor

1 Answers1