我们在使用vue-quill-editor富文本编辑器的时候,上传的图片返回的都是很长的base64的格式,往往都需要转换成图片的url存在数据库里面。
解决思路为在页面上设置一个elementui的文件上传的隐藏域,重写富文本编辑器的图片的点击事件,在点击事件中触发文件上传组件的点击事件,上传图片成功后,追加到富文本编辑器的内容中!
那么如何实现呢?请看以下详细步骤!!
1、安装vue-quill-editor
使用命令:npm install vue-quill-editor -S
在package.json中出现以下版本信息说明安装成功!
2、在main.js中写入以下代码
import VueQuillEditor from ‘vue-quill-editor’//富文本
import ‘quill/dist/quill.core.css’//富文本
import ‘quill/dist/quill.snow.css’//富文本
import ‘quill/dist/quill.bubble.css’//富文本
Vue.use(VueQuillEditor);//富文本
3、使用
1. 在需要使用富文本编辑器的.vue文件中定义需要用到哪些富文本的toolbar
代码:
const toolbarOptions = [
[‘bold’, ‘italic’, ‘underline’, ‘strike’], // toggled buttons
[‘blockquote’, ‘code-block’],
[{‘header’: 1}, {‘header’: 2}], // custom button values
[{‘list’: ‘ordered’}, {‘list’: ‘bullet’}],
[{‘script’: ‘sub’}, {‘script’: ‘super’}], // superscript/subscript
[{‘indent’: ‘-1’}, {‘indent’: ‘+1’}], // outdent/indent
[{‘align’: []}],
[‘link’, ‘image’],
[‘clean’] // remove formatting button
];
2. 在data中配置,并重写image的点击事件
代码:
editorOption: {
placeholder: ‘’,
theme: ‘snow’, // or ‘bubble’
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
‘image’: function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(’.avatar-uploader2 input’).click()
} else {
this.quill.format(‘image’, false);
}
}
}
}
}
},
3.页面上定义一个elementui的上传组件以及一个富文本编辑器
富文本:
文件上传:
4.上传成功的方法
代码:
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == '1') {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', this.imgUrl + res.data)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false;
},
4、完结,撒花!!!