Quill 编辑器 - 在 quill 编辑器中的光标处插入内容
Posted
技术标签:
【中文标题】Quill 编辑器 - 在 quill 编辑器中的光标处插入内容【英文标题】:Quill editor - insert content in quill editor at the cursor 【发布时间】:2021-08-05 14:25:24 【问题描述】:我正在使用羽毛笔编辑器。假设我有一个选择框,我可以从中选择值,以便可以将其插入到羽毛笔编辑器中。但我希望将值插入光标处,而不是内容的末尾或开头。
【问题讨论】:
您好。尝试在您的问题中添加更多代码,以便人们更好地理解您的案例。 【参考方案1】://获取选择的索引
var range = quill.getSelection();
//在光标处插入文本
quill.insertText(range.index, text, 'bold', true);
【讨论】:
【参考方案2】:你来了,看看下面的代码框演示:
https://codesandbox.io/s/hidden-***-m2m80?file=/src/app/app.component.ts
绑定鹅毛笔编辑器的引用
@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
【讨论】:
以上是关于Quill 编辑器 - 在 quill 编辑器中的光标处插入内容的主要内容,如果未能解决你的问题,请参考以下文章
Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
富文本编辑器上传不了微信文件夹的图片,使用vue-quill-editor编辑器