[英]Quill editor - insert content in quill editor at the cursor
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.假设我有一个 select 框,我可以从中获取 select 值,以便可以将其插入到羽毛笔编辑器中。 But I want the value to be inserted at the cursor, instead of at the end or beginning of the content.但我希望将值插入 cursor,而不是内容的末尾或开头。
Here you are, check out the codesandbox demo below:在这里,请查看下面的代码框演示:
https://codesandbox.io/s/hidden-brook-m2m80?file=/src/app/app.component.ts https://codesandbox.io/s/hidden-brook-m2m80?file=/src/app/app.component.ts
Bind the reference of quill editor绑定quill editor的引用
@ViewChild(QuillEditorComponent, { static: true })
editor: QuillEditorComponent;
Get the cursor position and insert text获取 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
}
}
//to get the index of selection //获取选择的索引
var range = quill.getSelection(); var range = quill.getSelection();
//to insert the text at cursor //在cursor处插入文本
quill.insertText(range.index, text, 'bold', true); quill.insertText(range.index, text, 'bold', true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.