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>