admin管理员组

文章数量:1327945

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.

Share Improve this question asked May 15, 2021 at 20:07 Adharsh ChottuAdharsh Chottu 1452 gold badges5 silver badges20 bronze badges 1
  • 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
Add a ment  | 

2 Answers 2

Reset to default 4

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

本文标签: javascriptQuill editorinsert content in quill editor at the cursorStack Overflow