## 「富文本编辑器」vue2-editor

1<template>
2	<div class="editor">
3		<vue-editor
4			v-model="editorHtml"
5			:customModules="customModulesForEditor"
6			:editorOptions="editorSettings"
7			:editorToolbar="customToolbar"
8			useCustomImageHandler
9			@image-added="handleImageAdded"
10			@blur="onEditorBlur"
11		/>
12	</div>
13</template>
14
15<script>
16	// 引入vue2wditor
17	import { VueEditor } from "vue2-editor";
18	// 导入图片操作相关插件
19	import { ImageDrop } from "quill-image-drop-module";
20	import ImageResize from "quill-image-resize-module";
21
22	export default {
23		name: "Vue2Editor",
24		components: { VueEditor },
25		props: {
26			defaultText: { type: String, default: "" },
27			richText: { type: String, default: "" }
28		},
29		watch: {
30			// 监听默认值回调
31			defaultText(nv, ov) {
32				if (nv != "") {
33					this.editorHtml = nv;
34					this.$emit("update:rich-text", nv);
35				}
36			}
37		},
38		data() {
39			return {
40				editorHtml: "",
41				// 菜单栏
42				customToolbar: [
43					[{ header: [false, 1, 2, 3, 4, 5, 6] }],
44					["bold", "underline"],
45					[{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
46					[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
47					[{ indent: "-1" }, { indent: "+1" }],
48					["color", "background"],
49					["link", "image", "video"]
50				],
51				// 调整图片大小和位置
52				customModulesForEditor: [
53					{ alias: "imageDrop", module: ImageDrop },
54					{ alias: "imageResize", module: ImageResize }
55				],
56				// 设置编辑器图片可拖拽
57				editorSettings: {
58					modules: { imageDrop: true, imageResize: {} }
59				}
60			};
61		},
62		mounted() {},
63		methods: {
64			// 自定义图片上传
65			handleImageAdded(file, Editor, cursorLocation, resetUploader) {
66				// 文件上传：$oss图片文件上传插件是自己封装的阿里云oss文件直传，此处代码自定义
67				this.$oss(file, file.name).then(url => {
68					if (!!url) {
69						Editor.insertEmbed(cursorLocation, "image", url);
70						resetUploader();
71					}
72				});
73			},
74			// 失去焦点
75			onEditorBlur(quill) {
76				this.$emit("update:rich-text", this.editorHtml);
77			}
78		}
79	};
80</script>
81
82<style scoped>
83	/* 处理添加视频链接标签位置 */
84	.editor >>> .ql-snow .ql-tooltip {
85		top: 0 !important;
86		left: 40% !important;
87	}
88</style>

1<template>
2	<div class="home">
3		<el-card shadow="never">
4			<div slot="header" class="clearfix">
5				<h1>Editor 编辑器</h1>
6			</div>
7			<!-- 编辑器 -->
8			<Editor :defaultText="defaultText" :richText.sync="richText" />
9		</el-card>
10	</div>
11</template>
12
13<script>
14	// 导入插件
15	import Editor from "../components/Editor";
16
17	export default {
18		name: "Home",
19		components: { Editor },
20		data() {
21			return {
22				defaultText: "",
23				richText: ""
24			};
25		}
26	};
27</script>