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