Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cursor position in quill Editor

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

like image 463
Rakesh Singh Avatar asked Oct 18 '25 13:10

Rakesh Singh


1 Answers

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

like image 69
Anonta Avatar answered Oct 20 '25 04:10

Anonta



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!