vue2项目使用vue-quill-editor，光标位置插入内容

需求 ： 左边是编辑框，右边是列表，利用左边的光标位置插入右边的节点内容
注意：右边树节点，需要用自定义的button样式，button样式才不会夺取了左边的光标
代码:

import { VueEditor } from ‘vue2-editor’ //引入插件
components: { VueEditor },
配置：
content:‘’,//内容
editorOption = {
modules: {
toolbar: [
[‘bold’, ‘italic’, ‘underline’, ‘strike’], //加粗，斜体，下划线，删除线
[‘blockquote’, ‘code-block’], //引用，代码块
[{ ‘header’: 1 }, { ‘header’: 2 }], // 标题，键值对的形式；1、2表示字体大小
[{ ‘list’: ‘ordered’ }, { ‘list’: ‘bullet’ }], //列表
[{ ‘script’: ‘sub’ }, { ‘script’: ‘super’ }], // 上下标
[{ ‘indent’: ‘-1’ }, { ‘indent’: ‘+1’ }], // 缩进
[{ ‘direction’: ‘rtl’ }], // 文本方向
[{ ‘size’: [‘small’, false, ‘large’, ‘huge’] }], // 字体大小
[{ ‘header’: [1, 2, 3, 4, 5, 6, false] }], //几级标题
[{ ‘color’: [] }, { ‘background’: [] }], // 字体颜色，字体背景颜色
[{ ‘font’: [] }], //字体
[{ ‘align’: [] }], //对齐方式
[‘clean’], //清除字体样式
]
},
placeholder: “请输入内容…”
}，
data：[{name:‘测试’，id：’1‘}]
方法：
handleNodeClick(data) {
let quill = this.$refs.VueEditor.quill
const cursorPosition = quill.getSelection(); // 获取光标位置
const newText = data.name;
if (cursorPosition === null) {
this.content += newText; // 光标位置为空，插入到末尾
} else {
quill.insertText(cursorPosition.index, newText); // 在光标位置插入文本
}
},