quill富文本编辑器图片默认是base64数据流,我们要实现把图片上传到服务器这个需求,quill中并没有找到相关配置
https://www.jianshu.com/p/9e4e4d955d0f
感谢作者给我灵感—用隐藏的input上传组件来实现自定义上传事件
cnpm install zx-quill
下载安装相关依赖
因为项目本身自带富文本,我们二次封装即可,这是vabQuill.js
import 'zx-quill/dist/zx-quill.css'
import VabQuill from 'zx-quill'
export default VabQuill
将二次封装的富文本提取成公共组件
<template>
<div>
<el-upload
class="avatar-uploader"
:action='upLoadUrl'
:show-file-list="false"
:headers='headers'
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<vab-quill
ref="QuillEditor"
v-model="content"
:min-height="300"
:options="options"
@change="onEditorChange($event)"
></vab-quill>
</div>
</template>
<script>
import vabQuill from '@/plugins/vabQuill'
import {baseURL} from '@/utils/baseUrl'
export default {
components: {
vabQuill
},
data(){
return{
headers:{token:sessionStorage.getItem('token')},
content:'',
// 富文本的配置
options: {
theme: 'snow',
bounds: document.body,
debug: 'warn',
modules: {
toolbar: {
container:[
['bold', 'italic', 'underline', 'strike'],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ color: [] }, { background: [] }],
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ align: [] }],
[{ direction: 'rtl' }],
[{ font: [] }],
['clean'],
['link', 'image']
],
handlers: {
'image': function (value) {
if (value) {
// 调用element图片上传
document.querySelector('.el-upload').click()
} else {
this.quill.format('image', false);
}
}
}
}
},
placeholder: '内容...',
readOnly: false,
imageUrl:'',
image:''
},
// 图片上传路径
upLoadUrl:baseURL+'/manage/upload_file',
}
},
mounted(){
},
methods:{
// 获取富文本的内容
showChild(e){
this.content=e;
},
// 上传组件获得的图片地址反渲染近富文本中
handleSuccess (res) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.Quill;
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
Message.error('图片插入失败')
}
},
handleAvatarSuccess(res, file) {
this.image=res.url;
this.handleSuccess(res.url)
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
<style scoped>
.avatar-uploader{
display: none;
}
</style>
到此,我们的功能就实现了,思路非常巧妙,将element中的upload隐藏,手动触发相关事件,再通过quill.getSelection()获取光标所在位置