So verwenden Sie Vue.js in Kombination mit dem Rich-Text-Editor Ueditor

In diesem Artikel wird hauptsächlich der Projektbeispielcode von Vue.js in Kombination mit Ueditor vorgestellt. Der detaillierte Code hat einen gewissen Referenzwert. Interessierte können sich über

in der Front-End-Entwicklung informieren Projekte. Es ist unvermeidlich, dass Sie auf die Notwendigkeit stoßen, einen Rich-Text-Editor auf der Seite zu integrieren.
Vor einiger Zeit musste das Vue.js-Projekt den UEditor-Rich-Text-Editor verwenden, aber ich fand keine detaillierten Anweisungen, also beschloss ich, es selbst zu versuchen .

1. Allgemeine Idee

1.1 Modularität

Ein großer Vorteil von vue Es liegt darin Modularisierung, durch die wir Seiten und Logik wiederverwenden können. So kann Ueditor in eine .vue-Vorlagendatei neu verpackt werden. Andere Komponenten implementieren die Wiederverwendung von Code, indem sie diese Vorlage einführen.

1.2 Datenübertragung

Zuerst muss die übergeordnete Komponente die Länge, Breite und den Anfangstext des Editors festlegen. Diese Daten können über Requisiten übergeben werden. Textänderungen im Editor können über benutzerdefinierte Vue-Ereignisse an die übergeordnete Komponente übergeben werden.

2. Spezifische Implementierungsschritte

2.1 Einführung wichtiger JS- und CSS-Dateien

Alles kopieren Fügen Sie die folgenden Dateien in das Projekt ein

2.2 Konfigurieren Sie Ueditor.config.js

Konfigurieren Sie zunächst die URL-Parameter Sie müssen diesen Pfad auf das Verzeichnis der gerade kopierten Datei verweisen. Beachten Sie, dass es hier am besten ist, relative Pfade zu verwenden.

var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';

Dann die Einstellung der Standardbreite und -höhe

,initialFrameWidth:null // null表示宽度自动
,initialFrameHeight:320

Konfiguration anderer Funktionen kann sein Schauen Sie sich die offizielle Dokumentation an

2.3 Editor-Vorlage erstellen

Wir müssen die Ueditor-Kern-JS-Bibliothek in die Editor-Vorlage importieren und die Rückruffunktion contentChange hinzufügen Du bist fertig.

Der Grund, warum die Importsyntax zur Einführung der JS-Kernbibliothek verwendet wird, liegt darin, dass sie eher der modularen ES6-Spezifikation entspricht. Ich habe im Internet gesehen, dass jemand vorgeschlagen hat, JS in main.js einzuführen, aber JS einzuführen Ein vorzeitiges Laden kann dazu führen, dass die Seite beim ersten Mal langsam geladen wird.

<template>
 <p ref="editor"></p>
</template>

<script>
 /* eslint-disable */
 import &#39;../../../assets/js/ueditor/ueditor.config&#39;;
 import &#39;../../../assets/js/ueditor/ueditor.all&#39;;
 import &#39;../../../assets/js/ueditor/lang/zh-cn/zh-cn&#39;;

 import { generateRandonInteger } from &#39;../../../vuex/utils&#39;;

 export default {
 data() {
  return {
  id: generateRandonInteger(100000) + &#39;ueditorId&#39;,
  };
 },
 props: {
  value: {
  type: String,
  default: null,
  },
  config: {
  type: Object,
  default: {},
  }
 },
 watch: {
  value: function value(val, oldVal) {
  this.editor = UE.getEditor(this.id, this.config);
  if (val !== null) {
   this.editor.setContent(val);
  }
  },
 },
 mounted() {
  this.$nextTick(function f1() {
  // 保证 this.$el 已经插入文档

  this.$refs.editor.id = this.id;
  this.editor = UE.getEditor(this.id, this.config);

  this.editor.ready(function f2() {
   this.editor.setContent(this.value);

   this.editor.addListener("contentChange", function () {
   const wordCount = this.editor.getContentLength(true);
   const content = this.editor.getContent();
   const plainTxt = this.editor.getPlainTxt();
   this.$emit(&#39;input&#39;, { wordCount: wordCount, content: content, plainTxt: plainTxt });
   }.bind(this));

   this.$emit(&#39;ready&#39;, this.editor);
  }.bind(this));
  });
 },
 };
</script>

<style>
 body{
  background-color:#ff0000;
 }
</style>

3. Verwendung des Editors

Verwendung der Editorvorlage Wann Ich muss die Konfiguration und den anfänglichen Textwert über Requisiten übergeben.

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
 <p class="edit-area">
  <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor>
 </p>

</template>

<script>
 import ueditor from &#39;./ueditor.vue&#39;;

 export default {
 components: {
  ueditor,
 },
 data() {
  return {
  defaultMsg: &#39;初始文本&#39;, 
  config: {
   initialFrameWidth: null,
   initialFrameHeight: 320,
  },
  };
 },
 };
</script>

Wenn Sie Ueditor Bilder hochladen lassen möchten, müssen Sie auch eine Schnittstelle im Hintergrund konfigurieren. Ich hatte noch keine Zeit, diesen Teil zu studieren. Ich werde ihn in ein paar Tagen nachholen.

Das Obige ist der gesamte Inhalt dieses Artikels Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Vue-Projektoptimierungsmethode durch Keep-Alive-Daten-Caching

Einführung in die Verwendung von Vue-Komponentenoptions-Requisiten

Vue.js Universal Application Framework – Analyse von Nuxt.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue.js in Kombination mit dem Rich-Text-Editor Ueditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!