Quill editor - 在光标处插入内容

Question

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

Answer 1

给你，查看下面的 codesandbox 演示：

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

绑定quill编辑器的引用

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

获取光标位置并插入文本

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

//获取选择的索引

可变范围 = quill.getSelection();

//在光标处插入文本

quill.insertText(range.index, 文本, 'bold', 真);

Quill editor - 在光标处插入内容

Quill editor - insert content in quill editor at the cursor

javascript

jquery

node.js

angularjs

typescript