vue 富文本编辑器多图上传

首先我使用的富文本编辑器是vue-quill-editor
使用npm进行下载

npm install vue-quill-editor --save

当然也可以按照官方的方法下载，到官方
因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版，当然使用其他组件库也可以
然后还有重要的一步需要引入jquery后面有地方需要用到
使用npm进行下载jquery

npm install jquery --save;

下面直接上代码

<template>
	<div>
		<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" />
		<a-upload list-type="picture-card" class="quill-upload" :show-upload-list="false" :multiple="true" v-show="false"
			:data="headerdata" action="https://upload-cn-east-2.qiniup.com" :before-upload="beforeUploadlogin"
			@change="handleChangeloginbig" :on-success="quillSuccess">
			<i class="el-icon-upload"></i>
		</a-upload>
	</div>
</template>


<script>
	const toolbarOptions = [
		['bold', 'italic', 'underline', 'strike'], // toggled buttons
		['blockquote', 'code-block'],

		[{
			header: 1
		}, {
			header: 2
		}], // custom button values
		[{
			list: 'ordered'
		}, {
			list: 'bullet'
		}],
		[{
			script: 'sub'
		}, {
			script: 'super'
		}], // superscript/subscript
		[{
			indent: '-1'
		}, {
			indent: '+1'
		}], // outdent/indent
		[{
			direction: 'rtl'
		}], // text direction

		[{
			size: ['small', false, 'large', 'huge']
		}], // custom dropdown
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}],

		[{
			color: []
		}, {
			background: []
		}], // dropdown with defaults from theme
		[{
			font: []
		}],
		[{
			align: []
		}],
		['link', 'image', 'video'],
		['clean'] // remove formatting button
	];
	import API from "@/Api/index.js";
	import UNITY from "@/commont/user.js";
	export default {
		data() {
			return {
				content: "",
				headerdata: {
					token: "",
					key: "",
				},
				loginimageUrlbig: [],
				URL: "",
				cyloginimageUrlbig: [],

				editorOption: {
					modules: {
						toolbar: {
							container: toolbarOptions,
							handlers: {
								// 重写点击组件上的图片按钮要执行的代码这里用到了jquery
								'image': (value) => {
									document.querySelector('.quill-upload .el-icon-upload').click()
								}
							}
						}
					}
				},
				cyput: 0
			}
		},
		created() {

		},
		methods: {
			async beforeUploadlogin(file) {
				this.cyput++
				let that = this;
				let time = new Date().getTime();
				time = time + '' + that.cyput
				//这边是封装的接口
				await API.UPLOADUPLOADTOKEN().then(res => {
					that.headerdata.token = res.data.data.token;
					that.headerdata.key = "permanent/head/" + time + '.png';
					that.URL = UNITY.getSession("qiniu_cdnurl");
				})
				const sizeOk = file.size < 1024 * 1000;
				if (!sizeOk) {
					this.$message.error('照片大小超过100K！');
					return
				}
			},
			handleChangeloginbig(info) {
				if (info.file.status === "done") {
					if (this.loginimageUrlbig.length < 9) {
						if (this.loginimageUrlbig[0] != "") {
							this.loginimageUrlbig.unshift("")
						}
					} else {
						this.loginimageUrlbig.shift()
					}
					let loCbig = this.URL + '/' + info.file.response.key;
					this.loginimageUrlbig.push(loCbig)
					if (loCbig) {
						// 获取文本编辑器
						let quill = this.$refs.myQuillEditor.quill
						// 获取光标位置
						let pos = quill.getSelection().index
						// 插入图片到光标位置
						quill.insertEmbed(pos, 'image', loCbig)
					} else {
						this.$essage.error('图片插入失败')
					}
				}
			},
		}
	}
</script>

<style scoped>

</style>