vue-quill-editor 在光标位置插入文本

背景

在使用富文本的时候，有的需求需要点击按钮插入相应的文本内容以及突出样式，

解决方法

 在无样式的情况

（insertText也可以设置样式（如字体颜色），但是用户输入新内容也会存在颜色）

// 文本内容
const text = 'hello'

// 获取编辑器对象
let quill = this.$refs.myQuillEditor.quill;
 
// 获取编辑器光标位置
let index = quill.selection.savedRange.index;
 
// 插入文本至光标位置，
quill.insertText(index, text);

// 重新计算index
index+=text.length

// 移动光标至文本后面
quill.setSelection(index);
 

 如果文本需要设置样式

// 文本内容
const text = 'hello'

// 获取编辑器对象
let quill = this.$refs.myQuillEditor.quill;
 
// 获取编辑器光标位置
let index = quill.selection.savedRange.index;
 
// 插入文本至光标位置，可自定义行内样式，前后添加空格，防止输入文本会带上自定义样式
quill.clipboard.dangerouslyPasteHTML(index, `<span>&nbsp;</span><span>${text}</span><span>&nbsp;</span>`);

// 重新计算index
index+=text.length+2

// 移动光标至文本后面
quill.setSelection(index);
 

传送门（api文档）https://www.kancloud.cn/liuwave/quill/1434140