0

src/components/page/mailboxMould.vue

@@ -0,0 +1,163 @@
+<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>