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="http://www.php.cn/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

. Bien sûr, vous pouvez également les mettre de manière sélective dans src)

Modifier l'éditeur UEditor Fichier de configuration

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

comme suit :

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

ueditor.config.js

Le fichier a de nombreuses configurations. Vous pouvez effectuer ici quelques configurations globales initialisées, telles que la largeur et la hauteur par défaut de l'éditeur :

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

D'autres configurations de paramètres sont répertoriées en détail dans ce fichier, ou reportez-vous au document officiel http://fex.baidu.com/ueditor/

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

Ouvrez le fichier /src/main.js et insérez le code suivant :

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

en tant que fichiers de composants de notre éditeur.

Le code suivant fournit des fonctions simples. Pour une utilisation spécifique, améliorez simplement le composant en fonction de vos besoins.

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

Le composant expose deux interfaces :

• value

  est le texte de l'éditeur

• config

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

Utilisez ce composant dans d'autres pages

Créez simplement une page qui nécessite UEditor, et utilisez le composant UE.vue juste encapsulé dans la page :

<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

Dans ueditor.config.js, configurez l'URL du serveur :

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

Je vous crois. J'ai maîtrisé la méthode après avoir lu le cas dans cet article, et plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!