So implementieren Sie einen Rich-Text-Editor in Vue2.0

Dieses Mal zeige ich Ihnen, wie Sie einen Rich-Text--Editor in Vue2.0 implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung eines Rich-Text-Editors in Vue2.0? , wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Im Vue-Projekt bin ich auf die Notwendigkeit gestoßen, einen Rich-Text-Editor zu verwenden. Ich habe viele Vue-gekapselte Editor-Plug-Ins auf Github gesehen, die das Hochladen von Bildern und Videos nicht sehr gut unterstützten . Am Ende entschied sich Or für die Verwendung von UEditor.

Es gibt viele solcher Artikel im Internet, die ich recherchiert, handgeschrieben, zusammengefasst und in diesen Artikel gesetzt habe.

Laden Sie den entsprechenden UEditor-Quellcode herunter

Rufen Sie zunächst die offizielle Website auf, um den Quellcode von UEditor herunterzuladen, und laden Sie die entsprechende Version (PHP, Asp, .Net, Jsp) entsprechend Ihrer Hintergrundsprache herunter.

http://ueditor.baidu.com/website/download.html

Legen Sie die Ressourcen nach dem Herunterladen im Verzeichnis /<code>/<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>/ue/static/ue/ static

ab.

static (Ich habe UEditor im statischen Verzeichnis webpack abgelegt. Die Dateien hier werden nicht von

gepackt. Natürlich können Sie sie auch selektiv in src ablegen)

UEditor-Editor bearbeiten Konfigurationsdatei

ueditor.config.js Wir öffnen window.UEDITOR_HOME_UR und ändern die

-Konfiguration wie folgt:

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

ueditor.config.js

Die Datei verfügt über viele Konfigurationen. Hier können Sie einige initialisierte globale Konfigurationen vornehmen, z. B. die Standardbreite und -höhe des Editors:

,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320

Weitere Parameterkonfigurationen sind in dieser Datei ausführlich aufgeführt oder finden Sie im offiziellen Dokument http://fex.baidu.com/ueditor/

Den Editor in das System integrieren

Öffnen Sie die Datei /src/main.js und fügen Sie den folgenden Code ein:

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

Entwickeln Sie die öffentliche Komponente UE.vue

/src/components/ Wir erstellen UE.vue-Dateien im Verzeichnis

als unsere Editor-Komponentendateien.

Der folgende Code bietet einfache Funktionen. Für eine bestimmte Verwendung können Sie die Komponente einfach entsprechend Ihren Anforderungen verbessern.

<template>
  <p>
    <script type="text/plain"></script>
  </p>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      this.editor = window.UE.getEditor('editor', this.config);
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

Die Komponente stellt zwei Schnittstellen bereit:

• value

  ist der Text des Herausgebers

• config

  ist der Editor-Konfigurationsparameter

Verwenden Sie diese Komponente auf anderen Seiten

Erstellen Sie einfach eine Seite, die UEditor erfordert, und verwenden Sie die gerade in der Seite gekapselte UE.vue-Komponente:

<template>
  <p>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <button @click="returnContent">显示编辑器内容</el-button>
    <p>{{dat.content}}</p>
  </p>
</template>
<script>
  import Uediter from '@/components/UE.vue';
  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }
</script>

Nach der Konfiguration des oben genannten Inhalts erscheint möglicherweise die Fehlermeldung „Das Rückgabeformat des Hintergrundkonfigurationselements ist falsch und die Upload-Funktion funktioniert nicht richtig!“ Wenn wir Bilder oder Videos im Editor hochladen, Es wird auch eine Antwortfehlermeldung angezeigt. Dies liegt daran, dass es keine Anforderungsschnittstelle zum Konfigurieren des Servers

gibt. Konfigurieren Sie in ueditor.config.js die serverUrl:

// 服务器统一请求接口路径
, serverUrl: 'http://172.16.254.49:83/File/UEditor'  //地址管你们后端要去

Ich habe die Methode gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Techniken gibt es für die Vue-Komponentenentwicklung?

Detaillierte Erläuterung der BAE-Schritte für die Verpackung und Hochladen von Vue-Projekten auf Baidu

Der Unterschied zwischen @HostBinding() und @HostListener() in AngularJS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Rich-Text-Editor in Vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!