Vue integriert einen Rich-Text-Editor, der das Zoomen und Ziehen von Bildern unterstützt

npm ich wangeditor --save
// oder
Garn hinzufügen Wangeditor

<Vorlage>
	<div Klasse="w_editor">
		<!-- Rich-Text-Editor -->
		<div id="w_view"></div>
	</div>
</Vorlage>

<Skript>
// Rich-Text importieren importiere WE von „wangeditor“;
//Führen Sie das ElementUI-Nachrichtenmodul ein (für sofortige Informationen)
importiere { Nachricht } von "element-ui";

Standard exportieren {
	Name: "WEditor",
	Requisiten: {
		// Standardwert defaultText: { Typ: String, Standard: "" },
		// Rich-Text aktualisierter Wert richText: { Typ: String, Standard: "" }
	},
	Daten() {
		zurückkehren {
			//Editor-Instanz-Editor: null,
			// Rich-Text-Menüoptionskonfiguration menuItem: [
				"Kopf",
				"deutlich",
				"Schriftgröße",
				"Schriftname",
				"kursiv",
				"unterstreichen",
				"Einzug",
				"Zeilenhöhe",
				"Vorderfarbe",
				"Hintergrundfarbe",
				"Link",
				"Liste",
				"rechtfertigen",
				"Bild",
				"Video"
			]
		};
	},
	betrachten:
		// Auf Standardwerte warten defaultText(nv, ov) {
			wenn (nv != "") {
				dies.editor.txt.html(nv);
				dies.$emit("update:rich-text", nv);
			}
		}
	},
	montiert() {
		dies.initEditor();
	},
	Methoden: {
		// Initialisiere den Editor initEditor() {
			//Dom-Knoten des Editors abrufen const editor = new WE("#w_view");
			//Konfiguriere den Editor editor.config.showLinkImg = false; /* Funktion zum Einfügen von Netzwerkbildern ausblenden*/
			editor.config.onchangeTimeout = 400; /* Konfigurieren Sie die Zeitfrequenz für die Auslösung von „onchange“, der Standardwert beträgt 200 ms */
			editor.config.uploadImgMaxLength = 1; /* Begrenzen Sie die maximale Anzahl von Bildern, die gleichzeitig hochgeladen werden können*/
			// editor.config.showFullScreen = false; /* Konfigurieren, ob die Funktionsschaltfläche im Vollbildmodus angezeigt werden soll*/
			editor.config.menus = [...this.menuItem]; /* Benutzerdefiniertes Systemmenü */
			// editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* Bildgröße begrenzen */;
			editor.config.customAlert = err => {
				Nachricht.Fehler(err);
			};
			// Änderungen überwachen und Daten synchron aktualisieren editor.config.onchange = newHtml => {
				// Die Änderungen am Rich-Text-Wert der Komponente asynchron aktualisieren. this.$emit("update:rich-text", newHtml);
			};
			// Benutzerdefiniertes Upload-Bild editor.config.customUploadImg = (resultFiles, insertImgFn) => {
				/**
				 * resultFiles: Dateistream zum Hochladen von Bildern * insertImgFn: Bild in Rich Text einfügen * Das zurückgegebene Ergebnis ist die generierte URL-Adresse des Bildes * */
				// Diese Methode wurde von Fengzhuan für das Alibaba Cloud Image OSS Direct Transfer Plugin neu geschrieben.
				dies.$oss(resultFiles[0], resultFiles[0]["name"]).dann(url => {
					!!url && insertImgFn(url); /* OSS-Bild hochladen, Bild in den Editor einfügen*/
				});
			};
			// Einen Editor erstellen editor.create();
			dieser.editor = Herausgeber;
		}
	},
	vorZerstören() {
		// Zerstöre den Editor this.editor.destroy();
		dieser.editor = null;
	}
};
</Skript>

<Vorlage>
	<div Klasse="Herausgeber">
		<el-card shadow="nie">
			<div Slot = "Header" Klasse = "Clearfix">
				<span>Rich-Text-Editor</span>
			</div>
			<div Klasse="Kartencenter">
				<WEditor :defaultText="defaultText" :richText.sync="richText" />
			</div>
		</el-Karte>
	</div>
</Vorlage>

<Skript>
// Den gepackten Editor importieren import WEditor from "@/components/WEditor";

Standard exportieren {
	Name: "Editor",
	Komponenten: { WEditor },
	Daten() {
		zurückkehren {
			// Standardwert defaultText: "",
			// Rich-Text aktualisierter Wert richText: ""
		};
	},
	erstellt() {
		// Warten Sie, bis die Komponente geladen ist, und weisen Sie den Wert this.$nextTick(() => { zu.
			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>`;
		});
	}
};
</Skript>