I am using quill editor. suppose i have a select box where i can select value from it, so that it can be inserted into the quill editor. But I want the value to be inserted at the cursor, instead of at the end or beginning of the content.

I am using quill editor. suppose i have a select box where i can select value from it, so that it can be inserted into the quill editor. But I want the value to be inserted at the cursor, instead of at the end or beginning of the content.

• javascript
• jquery
• node.js
• angularjs
• typescript

• Hi there. Try adding more code into your question so that people can better understand your case. – Nisanth Reddy Commented May 16, 2021 at 4:11

2 Answers 2

//to get the index of selection

var range = quill.getSelection();

//to insert the text at cursor

quill.insertText(range.index, text, 'bold', true);

Here you are, check out the codesandbox demo below:

https://codesandbox.io/s/hidden-brook-m2m80?file=/src/app/app.ponent.ts

Bind the reference of quill editor

@ViewChild(QuillEditorComponent, { static: true })
editor: QuillEditorComponent;

Get the cursor position and insert text

onChangeOption(key: string) {
    const index = this.editor.quillEditor?.getSelection()?.index; // get cursor position
    if (index !== undefined) {
      this.editor.quillEditor?.insertText(index, key); // insert text after the index
    }
}