本文主要是介绍vue-quill-editor自定义图片上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。
我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默认的图片上传是使用Data URL方式保存到了内容里，这不是我想要的，我相信大部分人也不想这样去保存图片，还好quill提供了如何去自定义按钮事件的demo(03-example.vue)，那么我们就可以自己去实现图片的保存方式了。
这里我用的是iview 的上传组件，上传成功后获得图片的地址，在编辑器中显示
先下载vue-quill-editor 然后下面是主要代码
<template>
<div>
<quill-editor ref="myQuillEditor"
@change="onEditorChange($event)">
</quill-editor>
<Upload :show-upload-list="false"
style="display: none;"
ref="up"
name="upfile"
:format="accept"
:max-size="maxsize"
multiple type="drag"
:on-exceeded-size="handleMaxSize"
:on-success="handleSuccess"
:action="imgUrl" >
<input :id="refid" />
</Upload>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import $ from 'jquery'
export default {
name:'quill',
components: {
quillEditor
},
data() {
return {
visible: false,
src: '',
uploadList: []
}
},
props:{
imgUrl:{
type:String,
},
accept:{
type:Array
},
maxsize:{
type:Number
},
refid:{
type:String
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
},
},
mounted() {
this.uploadList = this.$refs.up.fileList;
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick)
},
methods: {
//点击图片触发事件
imgClick() {
var up=this.refid;
console.log("up===",up)
$('#'+this.refid).click()
},
//查看图片
handleView(name) {
this.src = 'http://' + name;
this.visible = true;
},
//删除图片
handleRemove(file) {
// 从 upload 实例删除数据
const fileList = this.$refs.up.fileList;
this.$refs.up.fileList.splice(fileList.indexOf(file), 1);
},
//成功回调
handleSuccess(response, file, fileList) {
console.log("返回图片")
if(response.code == 500) {
this.$Message.error('上传失败!')
} else {
this.$Message.success('上传成功!')
//把图片插入指定的位置
this.editor.insertEmbed(this.editor.getSelection().index, 'image', 'http://'+response.data.picName)
}
console.log(response)
console.log(fileList)
console.log(file)
},
//文件太大，错误提示
handleMaxSize (file) {
this.$Notice.warning({
title: 'Exceeding file size limit',
desc: 'File ' + file.name + ' is too large, no more than 100M.'
});
console.log('File ' + file.name + ' is too large, no more than 100M.');
},
onEditorChange({editor,html,text}) {
this.$emit('quilCon',html)
}
}
};
</script>
<style>
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
<style scoped>
.demo-upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
margin-right: 4px;
}
.demo-upload-list img {
width: 100%;
height: 100%;
}
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover {
color: #fff;
font-size: 16px;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
}
</style>
这篇关于vue-quill-editor自定义图片上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
