vue，使用quill富文本编辑器，整合七牛云上传图片

1、创建QuillEditorQiniu.vue

<template>
	<div id='quillEditorQiniu'>
		<!-- 基于elementUi的上传组件 el-upload begin-->
		<div hidden="true"><el-upload class="avatar-uploader" action="https://upload-z2.qiniup.com" :data="qiniuForm"
		 :show-file-list="false" :on-success="uploadEditorSuccess" :on-error="uploadEditorError" :before-upload="beforeEditorUpload" :limit="1">
		</el-upload></div>
		
		<!-- 基于elementUi的上传组件 el-upload end-->
		<quill-editor class="editor" v-model="content" ref="customQuillEditor" :options="editorOption">
		</quill-editor>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';

	import axios from 'axios';

	import {
		quillEditor
	} from 'vue-quill-editor'


	//自定义编辑器的工作条
	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
	];
	export default {
		name: "editor2",
		components: {
			quillEditor
		},
		data() {
			return {
				uploadUrl: 'http://images.burnlord.com/',
				quillUpdateImg: false,
				content: '',
				editorOption: {
					placeholder: '请开始编辑',
					modules: {
						toolbar: {
							container: toolbarOptions, // 工具栏
							handlers: {
								'image': function(value) {
									if (value) {
										document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
									} else {
										this.quill.format('image', false);
									}
								}
							}
						}
					}
				},
				qiniuForm: {
					'key': '',
					'token': '',
					'fileName':''
				},
				qiniuUrlRoot:'http://sup.xxxxx.com/'   // 七牛云空间绑定的域名
			}
		},
		props: {

		},
		methods: {
            // 获取七牛云上传token，自己服务器对接
			getQiniuToken() {
				var that = this

				axios.get('/api/sys/qiniu/token/get', {

					})
					.then(function(res) {
						if (res.data.errcode == 200) {
							that.qiniuForm.token = res.data.errmsg;
						} else {

						}
					})
					.catch(function(error) {

					});
			},
			// 上传图片之前
			beforeEditorUpload(res, file) {

				// 文件时间戳命名，此处仅处理的图片类型
				var name=''
				if (res.type == 'image/png') {
					name =String(new Date().getTime() + "" + Math.floor(Math.random() * 1000))+ '.png'
				} else if (res.type == 'image/jpeg') {
					name = String(new Date().getTime() + "" + Math.floor(Math.random() * 1000)) + '.jpeg';
				}
				
				this.qiniuForm.key=name
				this.qiniuForm.fileName=name
				
				//显示上传动画
				this.quillUpdateImg = true;

			},

			// 上传图片成功
			uploadEditorSuccess(res, file) {

				//拼接出上传的图片在服务器的完整地址
				let imgUrl = this.qiniuUrlRoot + this.qiniuForm.key;

				// 获取富文本组件实例
				let quill = this.$refs.customQuillEditor.quill;

				// 获取光标所在位置
				let length = quill.getSelection().index;

				// 插入图片  res.info为服务器返回的图片地址
				quill.insertEmbed(length, 'image', imgUrl)

				// 调整光标到最后
				quill.setSelection(length + 1)

				//取消上传动画
				this.quillUpdateImg = false;

			},

			// 上传图片失败
			uploadEditorError(res, file) {
				//页面提示
				Notification.error({
					message: '上传图片失败'
				});

				//取消上传动画
				this.quillUpdateImg = false;
			},
		},
		mounted() {
			this.getQiniuToken()
		},
		watch: {
			content(newVal, oldVal) {
				this.$emit('input', newVal);
			}
		}
	}
</script>

<style scoped>
	.editor {
		min-height: 200px;
		margin-bottom: 60px;
	}
</style>

 

2、使用组件

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> 商品管理
				</el-breadcrumb-item>
				<el-breadcrumb-item>添加商品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="form-box">
				<el-form ref="form" label-width="80px">
					<el-form-item label="详情介绍">
						<el-input type="textarea" rows="10" v-model="newGood.detail" placeholder="请输入详情页的html代码"></el-input>
						<squill-editor-qiniu v-model="newGood.detail"></squill-editor-qiniu>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>

	import SquillEditorQiniu from '@/components/page/QuillEditorQiniu.vue';

	export default {
		name: 'baseform',
		components: {
			SquillEditorQiniu
		},
		created() {
			
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	};
</script>