vue-quill-editor 自定义工具栏和自定义图片上传路径操作

2023-07-19 10:23:03 286

背景：

1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现，需要删除部分功能。

2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区，这会导致content字符长度太长，不一定可以传到后台保存（其实即使可以保存也不推荐这种方案）。所以我们需要将方案修改为将图片上传到服务器，然后通过URL的方式访问到图片回显及使用。

vue-quill-editor工具栏改造及自定义图片上传（这里使用的是element-ui的上传组件）：

引入插件（vue引入vue-quill-editor自行问度娘）

vuehtml






vuejs

editorOption:{
placeholder:'Pleaseenterithere...',
modules:{
toolbar:{
container:[
['bold','italic','underline','strike'],//加粗，斜体，下划线，删除线
['blockquote'],//引用
[{'header':1},{'header':2}],//标题，键值对的形式；1、2表示字体大小
[{'list':'ordered'},{'list':'bullet'}],//列表
[{'indent':'-1'},{'indent':'+1'}],//缩进
[{'direction':'rtl'}],//文本方向
[{'size':['small',false,'large','huge']}],//字体大小
[{'header':[1,2,3,4,5,6,false]}],//几级标题
[{'color':[]},{'background':[]}],//字体颜色，字体背景颜色
[{'font':[]}],//字体
[{'align':[]}],//对齐方式
['clean'],//清除字体样式
['image']//上传图片、上传视频
],
handlers:{
'image':function(val){
if(val){
document.querySelector('.quill-imginput').click()
}else{
this.quill.format('image',false);
}
}
}
}
}
}

自定义上传回显

//富文本编辑框图片上传
quillImgSuccess(res,file){
//获取富文本组件实例
letquill=this.$refs.myTextEditor.quill;
//如果上传成功
if(res.code=='00001'){
//获取光标所在位置
letlength=quill.getSelection().index;
//插入图片res.data为服务器返回的图片地址
quill.insertEmbed(length,'image','/static-resource/'+res.body);//这里的url是图片的访问路径不是真实物理路径
//调整光标到最后
quill.setSelection(length+1)
}else{
this.$message.error('图片插入失败')
}
}

校验图片格式

quillImgBefore(file){
letfileType=file.type;
if(fileType==='image/jpeg'||fileType==='image/png'){
returntrue;
}else{
this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
returnfalse;
}
},

至此大功告成。这里面只记录了关键步骤，不清楚的地方评论吧

！！！！注意：

在自定义上传图片的改造过程中如果存在多个富文本框同时存在一个页面时需要保证每个富文本及对应的upload的ref不一样

补充知识：在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）运用vue-quilt-editor编写富文本编辑器自定义图片路径获取后台返回路径

一、首先在main.js引入vue-quilt-editor

importVueQuillEditorfrom'vue-quill-editor'
import'quill/dist/quill.core.css'
import'quill/dist/quill.snow.css'
import'quill/dist/quill.bubble.css'

引入vue-quilt-editor样式否则样式会乱码

二、导入依赖

npminstallvue-quilt-editorsave

三、使用组件

1.code







点击上传

绑定v-model添加方法这里使用隐形的上传按钮来自定义自己的路径headers绑定图片上传的token否则会报401

headers:{
'Authorization':'Bearer'+JSON.parse(window.sessionStorage.getItem('token')),
'Accept':'application/json',
'X-TenantId':JSON.parse(window.sessionStorage.getItem('user')).tenantId
},

2.js

import{quillEditor}from'vue-quill-editor'//调用编辑器

在挂载时为图片上传按钮绑定事件

mounted(){
//为图片ICON绑定事件getModule为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image',this.imgHandler)
},

onEditorReady(){
},
//点击图片按钮会立即调用隐形按钮的上传

imgHandler(state){

this.addRange=this.$refs.myQuillEditor.quill.getSelection()
if(state){
constfileInput=document.getElementById('imgInput')
fileInput.click()//加一个触发事件
}
this.uploadType='image'
},
beforeUploadDetial(file){
//图片上传之前调取的函数
console.log(file)
returnthis.qnUpload(file)
},
qnUpload(file){
this.fullscreenLoading=true
constsuffix=file.name.split('.')
constext=suffix.splice(suffix.length-1,1)[0]
console.log(this.uploadType)
if(this.uploadType==='image'){//如果是点击插入图片
this.uploadData={
key:`image/${suffix.join('.')}_${newDate().getTime()}.${ext}`
}
}
},
upScuccess(e,file,fileList){
console.log(e)
this.fullscreenLoading=false
constvm=this
leturl=''
if(this.uploadType==='image'){//获得文件上传后的URL地址
url=访问路径+e
}
if(url!=null&&url.length>0){//将文件上传后的URL地址插入到编辑器文本中
letvalue=url
vm.addRange=vm.$refs.myQuillEditor.quill.getSelection()
value=value.indexOf('http')!==-1?value:'http:'+value
vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange!==null?vm.addRange.index:0,vm.uploadType,value,'image')//调用编辑器的insertEmbed方法，插入URL
}
this.$refs['upload'].clearFiles()//插入成功后清除input的内容
},

以上这篇vue-quill-editor自定义工具栏和自定义图片上传路径操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vue-quill-editor 自定义工具栏和自定义图片上传路径操作

热门推荐

随机推荐