vue-quill-editor⾃定义⼯具栏和⾃定义图⽚上传路径操作
背景：
1.某些场景下vue-quill-editor默认的⼯具栏部分功能不希望出现，需要删除部分功能。
2.vue-quill-editor默认提供的图⽚上传⽅案是将图⽚转成base64存放到内容区，这会导致content字符长度太长，不⼀定可以传到后台保存（其实即使可以保存也不推荐这种⽅案）。所以我们需要将⽅案修改为将图⽚上传到服务器，然后通过URL的⽅式访问到图⽚回显及使⽤。
vue-quill-editor⼯具栏改造及⾃定义图⽚上传（这⾥使⽤的是element-ui的上传组件）：
引⼊插件（vue引⼊vue-quill-editor⾃⾏问度娘）
vue html
<el-upload class="avatar-uploader quill-img" name="file"
:action="uploadImgUrl"
:show-file-list="false"
:headers="uploadHeaders"
:on-success="quillImgSuccess"
:before-upload="quillImgBefore"
accept='.jpg,.jpeg,.png,.gif'>
</el-upload>
<quill-editor ref="myTextEditor"
v-model="yearReviewForm.workCompletion"
:options="editorOption">
</quill-editor>
vue js
editorOption: {
placeholder: 'Please enter ',
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){
editor barif(val){
document.querySelector('.quill-img input').click()
}else{
this.quill.format('image', false);
}
}
}
}
}
}
⾃定义上传回显
// 富⽂本编辑框图⽚上传
quillImgSuccess(res, file) {
/
/ 获取富⽂本组件实例
let quill = this.$TextEditor.quill;
// 如果上传成功
if (de == '00001') {
// 获取光标所在位置
let length = Selection().index;
// 插⼊图⽚ res.data为服务器返回的图⽚地址
quill.insertEmbed(length, 'image', '/static-resource/' + res.body);// 这⾥的url是图⽚的访问路径不是真实物理路径
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$('图⽚插⼊失败')
}
}
校验图⽚格式
quillImgBefore(file){
let fileType = pe;
if(fileType === 'image/jpeg' || fileType === 'image/png'){
return true;
}else {
this.$('请插⼊图⽚类型⽂件(jpg/jpeg/png)');
return false;
}
},
⾄此⼤功告成。这⾥⾯只记录了关键步骤，不清楚的地⽅评论吧
注意：
在⾃定义上传图⽚的改造过程中如果存在多个富⽂本框同时存在⼀个页⾯时需要保证每个富⽂本及对应的upload的ref不⼀样
补充知识：在Vue项⽬使⽤quill-editor带样式编辑器（更改插⼊图⽚和视频）运⽤vue-quilt-editor编写富⽂本编辑器⾃定义图⽚路径获取后台返回路径
⼀、⾸先在main.js 引⼊ vue-quilt-editor
import VueQuillEditor from 'vue-quill-editor'
import 'quill/ss'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
引⼊vue-quilt-editor样式否则样式会乱码
⼆、导⼊依赖
npm install vue-quilt-editor save
三、使⽤组件
<el-col :span="24" class="warp-main" >
<el-form-item >
<div class="edit_container">
<quill-editor v-model="mate.mateFormerHeader.values[object['description'].name]"
ref="myQuillEditor"
class="editer"
:headers="headers"
:options="editorOption" @ready="onEditorReady($event)">
</quill-editor>
<el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUploadDetial' :data="uploadData" :on-success='upScuccess'
:headers="headers" ref="upload" >
<el-button size="small" type="primary" id="imgInput" >点击上传</el-button>
</el-upload>
</div>
</el-form-item>
</el-col>
绑定v-model 添加⽅法这⾥使⽤隐形的上传按钮来⾃定义⾃⼰的路径 headers 绑定图⽚上传的token 否则会报401
headers: {
'Authorization': 'Bearer ' + JSON.parse(Item('token')),
'Accept': 'application/json',
'X-TenantId': JSON.parse(Item('user')).tenantId
},
2.js
import { quillEditor } from 'vue-quill-editor' // 调⽤编辑器
在挂载时为图⽚上传按钮绑定事件
mounted () {
// 为图⽚ICON绑定事件 getModule 为编辑器的内部属性
this.$Module('toolbar').addHandler('image', this.imgHandler)
},
onEditorReady () {
},
// 点击图⽚按钮会⽴即调⽤隐形按钮的上传
imgHandler (state) {
this.addRange = this.$Selection()
if (state) {
const fileInput = ElementById('imgInput')
fileInput.click() // 加⼀个触发事件
}
this.uploadType = 'image'
},
beforeUploadDetial (file) {
// 图⽚上传之前调取的函数
console.log(file)
return this.qnUpload(file)
},
qnUpload (file) {
this.fullscreenLoading = true
const suffix = file.name.split('.')
const ext = suffix.splice(suffix.length - 1, 1)[0]
console.log(this.uploadType)
if (this.uploadType === 'image') { // 如果是点击插⼊图⽚
this.uploadData = {
key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`
}
}
},
upScuccess (e, file, fileList) {
console.log(e)
this.fullscreenLoading = false
const vm = this
let url = ''
if (this.uploadType === 'image') { // 获得⽂件上传后的URL地址
url = 访问路径 + e
}
if (url != null && url.length > 0) { // 将⽂件上传后的URL地址插⼊到编辑器⽂本中
let value = url
vm.addRange = vm.$Selection()
value = value.indexOf('http') !== -1 ? value : 'http:' + value
vm.$QuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, 'image') // 调⽤编辑器的 insertEmbed ⽅法，插⼊URL }
this.$refs['upload'].clearFiles() // 插⼊成功后清除input的内容
},
以上这篇vue-quill-editor ⾃定义⼯具栏和⾃定义图⽚上传路径操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。