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="//m.sbmmt.com/wiki/188.html" target="_blank">static</a>/ue/static/ue/ static

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

UEditor-Editor bearbeiten Konfigurationsdatei

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

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

ueditor.config.js

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

Den Editor in das System integrieren

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

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

• value

  ist der Text des Herausgebers

• config

  ist der Editor-Konfigurationsparameter

<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

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

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!