vue-quill-editor复制图片实际上会以:base64形式的进行一个上传,base64写进数据库那不是gg。
解决思路: 将复制的图片上传至服务器,将服务器返回的图片地址作为img标签插入富文本编辑器中。
此功能是在已有功能上的增加用户体验,基础构建代码请看这里
代码(vue项目):
mounted() {
// 自定义粘贴图片功能
let quill = this.$refs.myQuillEditor.quill;
this.$forceUpdate();
quill.root.addEventListener(
"paste",
(evt) => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, (file) => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
const formData = new FormData();
formData.append("pictureFile", file);
makdwnImg(formData)
.then((res) => {
let quill = this.$refs.myQuillEditor.quill;
if (res.data.code == 200) {
// const formdata = _.extend({}, this.formdata)
let length = quill.getSelection().index; //光标位置
// 插入图片 图片地址
quill.insertEmbed(length, "image", res.data.data);
// 调整光标到最后
quill.setSelection(length + 1); //光标后移一位
}
})
.catch((err) => {
console.error(err);
});
});
}
},
false
);
},