Vue integrates a rich text editor that supports image zooming and dragging

npm i wangeditor --save
// or
yarn add wangeditor

<template>
	<div class="w_editor">
		<!-- Rich text editor -->
		<div id="w_view"></div>
	</div>
</template>

<script>
// Import rich text import WE from "wangeditor";
//Introduce the elementUI Message module (for prompt information)
import { Message } from "element-ui";

export default {
	name: "WEditor",
	props: {
		// default value defaultText: { type: String, default: "" },
		// Rich text updated value richText: { type: String, default: "" }
	},
	data() {
		return {
			// Editor instance editor: null,
			// Rich text menu option configuration menuItem: [
				"head",
				"bold",
				"fontSize",
				"fontName",
				"italic",
				"underline",
				"indent",
				"lineHeight",
				"foreColor",
				"backColor",
				"link",
				"list",
				"justify",
				"image",
				"video"
			]
		};
	},
	watch:
		// Listen for default values ​​defaultText(nv, ov) {
			if (nv != "") {
				this.editor.txt.html(nv);
				this.$emit("update:rich-text", nv);
			}
		}
	},
	mounted() {
		this.initEditor();
	},
	methods: {
		// Initialize the editor initEditor() {
			// Get the editor dom node const editor = new WE("#w_view");
			//Configure the editor editor.config.showLinkImg = false; /* Hide the function of inserting network pictures*/
			editor.config.onchangeTimeout = 400; /* Configure the time frequency of triggering onchange, the default is 200ms */
			editor.config.uploadImgMaxLength = 1; /* Limit the maximum number of images that can be uploaded at one time*/
			// editor.config.showFullScreen = false; /* Configure whether to display the full screen function button*/
			editor.config.menus = [...this.menuItem]; /* Custom system menu */
			// editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* Limit the image size */;
			editor.config.customAlert = err => {
				Message.error(err);
			};
			// Monitor changes and update data synchronously editor.config.onchange = newHtml => {
				// Asynchronously update the changes of component rich text value this.$emit("update:rich-text", newHtml);
			};
			// Custom upload image editor.config.customUploadImg = (resultFiles, insertImgFn) => {
				/**
				 * resultFiles: image upload file stream * insertImgFn: insert image into rich text * The returned result is the generated image URL address * */
				// This method is rewritten by Fengzhuan for the Alibaba Cloud Image OSS Direct Transfer Plugin.
				this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
					!!url && insertImgFn(url); /* OSS image upload, insert the image into the editor*/
				});
			};
			// Create an editor editor.create();
			this.editor = editor;
		}
	},
	beforeDestroy() {
		// Destroy the editor this.editor.destroy();
		this.editor = null;
	}
};
</script>

<template>
	<div class="editor">
		<el-card shadow="never">
			<div slot="header" class="clearfix">
				<span>Rich Text Editor</span>
			</div>
			<div class="card_center">
				<WEditor :defaultText="defaultText" :richText.sync="richText" />
			</div>
		</el-card>
	</div>
</template>

<script>
// Import the packaged editor import WEditor from "@/components/WEditor";

export default {
	name: "Editor",
	components: { WEditor },
	data() {
		return {
			// Default value defaultText: "",
			// Rich text updated value richText: ""
		};
	},
	created() {
		// Wait for the component to load and assign value this.$nextTick(() => {
			this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`;
		});
	}
};
</script>