<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Mailbox template list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div>
				<quill-editor ref="myTextEditor" v-model="tempForm.content" :options="editorOption"></quill-editor>
				<el-upload class="avatar-uploader" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
				 :on-success="uploadSuccess">
				</el-upload>
			</div>
		</div>

	</div>
</template>

<script>
	// 引入富文本quill-editor相关组件依赖
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor'
	// import {
	// 	container,
	// 	QuillWatch
	// } from 'quill-image-extend-module'
	// import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
	// Quill.register('modules/imageResize', ImageResize)

	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				tempForm: {
					content: ''
				},
				editorOption: {
					placeholder: 'Please enter...',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								['blockquote', 'code-block'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'indent': '-1'
								}, {
									'indent': '+1'
								}],
								[{
									'direction': 'rtl'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'font': []
								}],
								[{
									'align': []
								}],
								['link', 'image']
							],
							// 工具栏
							handlers: {
								image: function(value) {
									if (value) {
										// upload点击上传事件
										document.querySelector('.avatar-uploader input').click()
									} else {
										this.quill.format('image', false)
									}
								}
							}
						},
						// 调整图片大小
						// imageResize: {
						// 	displayStyles: {
						// 		backgroundColor: 'black',
						// 		border: 'none',
						// 		color: 'white'
						// 	},
						// 	modules: ['Resize', 'DisplaySize', 'Toolbar']
						// }
					}
				},
			};
		},
		created() {
			this.getDate();
		},
		// components: {
		// 	quillEditor
		// },
		methods: {
			// 获取编辑列表数据
			getDate() {

			},

			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},

			// 上传成功
			uploadSuccess(res) {
				let quill = this.$refs.myTextEditor.quill;

				// 获取光标所在位置
				let length = quill.getSelection().index
				// 插入图片 res.upurl为服务器返回的图片地址
				quill.insertEmbed(length, 'image', this.baseUrl + res.data.icon)
				// 调整光标到最后
				quill.setSelection(length + 1)
			}

		}
	};
</script>

<style scoped>
	.avatar-uploader {
		height: 0;
	}

	.avatar-uploader .el-upload--text {
		height: 0 !important;
		border: 0;
	}
</style>
