So integrieren Sie den Rich-Text-Editor UEditor

Dieses Mal werde ich Ihnen die Methode zur Integration des UEditor-Rich-Text--Editors vorstellen. Welche Vorsichtsmaßnahmen gibt es für die Integration des UEditor-Rich-Text-Editors? Das Folgende ist ein praktischer Fall einmal einen Blick darauf werfen.

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. Ich habe sie recherchiert, den Code handgeschrieben, zusammengefasst und gesetzt, um diesen Artikel zu bilden.

Laden Sie den entsprechenden UEditor-Quellcode herunter

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

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

Legen Sie die Ressourcen nach dem Herunterladen in das statische Verzeichnis /static/ue/. Die Dokumentstruktur ist wie folgt:

(Ich habe UEditor im statischen Verzeichnis static abgelegt. Die Dateien hier werden nicht von webpack gepackt. Natürlich Sie kann es auch selektiv in src einfügen)

Bearbeiten Sie die -Konfigurationsdatei des UEditor-Editors

Wir öffnen ueditor.config.js und ändern die window.UEDITOR_HOME_UR-Konfiguration wie folgt:

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

ueditor.config.jsDie Datei hat viele Konfigurationen. Hier können Sie einige globale Initialisierungskonfigurationen vornehmen, z. B. die Standardbreite und -höhe des Editors:

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

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

Integrieren Sie den Editor in das System

Ö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

Wir erstellen es in der Datei /src/components/ VerzeichnisUE.vue, als unsere Editor-Komponentendatei.

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

<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>

stellt zwei Schnittstellen bereit:

• value ist der Text des Editors

• configEs ist der Konfigurationsparameter des Editors

Verwenden Sie diese Komponente auf anderen Seiten

Erstellen Sie einfach eine Seite, die UEditor erfordert, und verwenden Sie dann die gerade gepackte Seite Diese Seite 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>

Der Effekt ist wie folgt:

Außerdem: Konfiguration auf der Serverseite erforderlich

Nach der Konfiguration des oben genannten Inhalts zeigt die Konsole möglicherweise eine Fehlermeldung an: „Das Rückgabeformat des Hintergrundkonfigurationselements ist falsch und die Upload-Funktion funktioniert nicht richtig!“
Wenn wir Bilder hochladen oder Videos im Editor erscheint ebenfalls eine Antwort. Der Fehler wird gemeldet, da keine Konfigurationsserver Anforderungsschnittstelle vorhanden ist. Konfigurieren Sie in ueditor.config.js die serverUrl:

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

Ich glaube, Sie haben die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Webanwendung implementiert Back-Force-Aktualisierung

So verwenden Sie den automatischen Generator in ionic2

Das obige ist der detaillierte Inhalt vonSo integrieren Sie den Rich-Text-Editor UEditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!