羽毛笔编辑器 - 在 cursor 的羽毛笔编辑器中插入内容

Question

我正在使用羽毛笔编辑器。 假设我有一个 select 框，我可以从中获取 select 值，以便可以将其插入到羽毛笔编辑器中。 但我希望将值插入 cursor，而不是内容的末尾或开头。

Answer 1

在这里，请查看下面的代码框演示：

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

绑定quill editor的引用

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

获取 cursor position 并插入文本

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

Answer 2

//获取选择的索引

var range = quill.getSelection();

//在cursor处插入文本

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