Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器
粘贴图片:vue-quill-editor复制图片实际上会以 base64 形式的进行一个上传,写进数据库后会导致数据一些加载问题
**解决方法:**将复制的图片先上传到服务器,再将服务器返回的图片链接地址插入img标签中
优化:
mounted() {
this.editor = this.$refs.myQuillEditor.quill;
addQuillTitle();
let quill = this.$refs.myQuillEditor.quill;
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("file", file);
this.$axios.post(`${this.$Tools.Conts.domain}uploads`, formData).then(
res => {
if (res.data.code == 0) {
console.log(res.data.data.src)
// window.open(res.data.data.src)
let length = quill.getSelection().index; //光标位置
// 插入图片地址
quill.insertEmbed(length, "image", res.data.data.src);
// 光标后移一位
quill.setSelection(length + 1);
} else {
console.log(res.data)
this.$message({
message: res.data.message,
type: 'warning'
});
}
})
});
}
},
false
);
}
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)