Rich text editor (drag-and-zoom support for images)

Requirements:

According to service requirements, you need to be able to upload pictures, and the uploaded pictures can occupy the full screen width on the mobile terminal. Therefore, you need to be able to scale the uploaded pictures proportionally, drag, zoom, and change the size of the picture. Try multiple third-party rich text editors, and it’s hard to find one that perfectly meets your requirements. After several attempts, the wangEditor rich text editor was selected. The vue2Editor rich text editor was originally used. Vue2Editor itself does not support image drag, but provides a configurable image drag method, which requires quill.js to implement image drag. Although it meets the business requirements, the display effect on the mobile terminal is not very ideal. In this editor, the uploaded rich text needs to be displayed on the mobile terminal. In order to achieve the ideal effect, the image percentage needs to be modified. When the width attribute of the IMG tag is set to 100%, the requirements can be met. The recently released version of wangEditor (version 4 v4) met the requirements and was selected for real-world development.

Effect:

Code examples and related configurations are as follows:

  • Installing a plug-in
npm i wangeditor --save
// or
yarn add wangeditor
Copy the code
  • Editor configuration
<template>
	<div class="w_editor">
		<! -- Rich text editor -->
		<div id="w_view"></div>
	</div>
</template>

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

export default {
	name: "WEditor".props: {
		/ / the 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 ability to insert network images */
			editor.config.onchangeTimeout = 400; /* Set the time frequency for triggering onchange. The default is 200ms */
			editor.config.uploadImgMaxLength = 1; /* Limit the maximum number of images */
			// editor.config.showFullScreen = false; /* Configures whether to display the full-screen function button */
			editor.config.menus = [...this.menuItem]; /* Customize system menu */
			/ / editor. Config. UploadImgMaxSize = 5 * 1024 * 1024 / * limit size * / image;
			editor.config.customAlert = err= > {
				Message.error(err);
			};
			// Monitor changes and update data synchronously
			editor.config.onchange = newHtml= > {
				// Asynchronously updates changes in the component's rich text value
				this.$emit("update:rich-text", newHtml);
			};
			// Upload a custom image
			editor.config.customUploadImg = (resultFiles, insertImgFn) = > {
				/** * resultFiles: image upload file stream * insertImgFn: Insert image into rich text ** return result as generated image URL address ** /
				// This method is a plugin for self-sealing to earn overwritten Ari Cloud images.
				this.$oss(resultFiles[0], resultFiles[0] ["name"]).then(url= >{!!!!! url && insertImgFn(url);/* oss image upload, insert image into editor */
				});
			};
			Create an editor
			editor.create();
			this.editor = editor; }},beforeDestroy() {
		// Destroy the editor
		this.editor.destroy();
		this.editor = null; }};</script>
Copy the code

Note: For specific parameter Settings, refer to the instructions in the editor document.

Component uses the pull-out editor:

<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 wrapped editor
import WEditor from "@/components/WEditor";

export default {
	name: "Editor".components: { WEditor },
	data() {
		return {
			/ / the default value
			defaultText: "".// Rich text updated value
			richText: ""
		};
	},
	created() {
		// Wait for the component to finish loading
		this.$nextTick(() = > {
			this.defaultText = `
`; }); }};</script>
Copy the code