Comment implémenter un éditeur de texte enrichi dans Vue2.0

Cette fois, je vais vous montrer comment implémenter un éditeur de texte enrichi dans Vue2.0 Quelles sont les précautions pour implémenter un éditeur de texte enrichi dans Vue2.0. , comme suit C'est un cas pratique, jetons-y un coup d'œil.

Dans le projet Vue, j'ai rencontré le besoin d'utiliser un éditeur de texte enrichi. J'ai vu beaucoup de plug-ins d'éditeur encapsulés Vue sur github. Beaucoup d'entre eux ne prenaient pas très bien en charge le téléchargement d'images et de vidéos. . En fin de compte, ou j'ai décidé d'utiliser UEditor.

Il existe de nombreux articles de ce type sur Internet. Je les ai explorés, écrits à la main, résumés et rédigés pour former cet article.

Téléchargez le code source UEditor correspondant

Tout d'abord, rendez-vous sur le site officiel pour télécharger le code source de UEditor, et téléchargez la version correspondante (PHP, Asp, .Net, Jsp) en fonction de votre langue de fond.

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

Après le téléchargement, placez les ressources dans le répertoire /<code>/<a href="//m.sbmmt.com/wiki/188.html" target="_blank">static</a>/ue/static/ue/ static

static (J'ai placé UEditor dans le répertoire statique webpack. Les fichiers ici ne seront pas empaquetés par

Modifier l'éditeur UEditor Fichier de configuration

ueditor.config.js On ouvre window.UEDITOR_HOME_UR et on modifie la configuration

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

ueditor.config.js

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

Intégrer l'éditeur dans le système

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

Développer le composant public UE.vue

/src/components/ Nous créons des fichiers UE.vue dans le répertoire

<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

  est le texte de l'éditeur

• config

  est le paramètre de configuration de l'éditeur

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

Après avoir configuré le contenu ci-dessus, un message d'erreur « Le format de retour de l'élément de configuration en arrière-plan est incorrect et la fonction de téléchargement ne fonctionnera pas correctement ! » peut apparaître sur la console Lorsque nous téléchargeons des images ou des vidéos dans l'éditeur, un message d'erreur de réponse apparaîtra également. C'est parce qu'il n'y a pas de interface de requête pour configurer le serveur

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

Quelles sont les techniques de développement de composants Vue

Explication détaillée des étapes BAE pour l'empaquetage et téléchargement de projets vue sur Baidu

La différence entre @HostBinding() et @HostListener() dans AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!