tinymce5的圖片上傳實現

在vue created中初始化

      	tinymce.init({
			selector: '#tinymce-editor',
			language_url: "/tinymce/zh_CN.js",
			language: "zh_CN",
			height: 400,
			toolbar: "formatselect fontselect | bold italic underline strikethrough | alignleft aligncenter alignjustify | image | undo redo",
			menubar: false,
			statusbar: false,
			tinycomments_mode: 'embedded',
			plugins: 'advlist paste image imagetools',
			image_title: false,
    		automatic_uploads: false,
			paste_data_images: true,
			images_upload_handler: this.imgUpload
		});

images_upload_handler綁定對應的圖片上傳函數

		imgUpload (blobInfo, success, failure) {
			const formData = new FormData();
			formData.append('files', blobInfo.blob(), blobInfo.filename());
			axios.post('/api/file/post', formData).then((res) => {
				if(res.data.success) {
					this.$message({
						message: '上傳成功',
						type: 'success',
						center: true
					});
					let url = res.data.urls[0].url
					this.imgString += url
					success(url)
				} else {
					this.$message({
						message: '上傳失敗',
						type: 'error',
						center: true
					});
					failure('')
				}
			}).catch((err) => {
				this.$message({
					message: '上傳失敗',
					type: 'error',
					center: true
				});
				failure('')
            })
		},

success(url)和failure('')對應上傳狀態回調