///https://b3log.org/vditor/ 秀
动态传入ref
props加
myEditor: {
type: String,
default: "myQuillEditor",
},
//上传按钮是第几个 在配置中更方便找到标签
quillIndex: {
type: Number,
default: 0,
},
在editor的配置中要注意
editorOption: {
// some quill options
placeholder: this.placeholder,
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
image: function (value) {
if (value) {
//通过css获取元素 获取到所有的元素后通过传入的下标确定是第几个元素
document
.querySelectorAll(".avatar-uploader input")
[this_.quillIndex].click();
} else {
this.quill.format("image", false);
}
},
},
},
},
特别注意 image点击事件 用querySelectorAll获取
image: function (value) {
if (value) {
document
.querySelectorAll(".avatar-uploader input")
[this_.quillIndex].click();//获取置顶标签
} else {
this.quill.format("image", false);
}
},
图片上传成功后的方法
//通过动态传入的myEditor获取该ref的editor标签
const quill = this.$refs[this.myEditor].quill;
// 获取光标所在位置
length = quill.getSelection().index;
// 插入图片
quill.insertEmbed(length, "image", res.resultData.fileLink);
// 调整光标到最后
quill.setSelection(length + 1);
封装好的组件