Comment intégrer l'éditeur de texte enrichi UEditor

Cette fois je vais vous apporter la méthode d'intégration de l'éditeur de texte riche UEditor , quelles sont les précautions pour intégrer l'éditeur de texte riche UEditor, ce qui suit est un cas pratique, prenons un coup d'oeil une fois.

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 composé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) selon votre langue de base.

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

Après le téléchargement, placez les ressources dans le répertoire statique /static/ue/. La structure du document est la suivante :

(J'ai placé UEditor dans le répertoire statique static. Les fichiers ici ne seront pas empaquetés par webpack. Bien sûr, vous peut aussi le mettre de manière sélective dans src)

Modifier l'éditeur UEditor fichier de configuration

Nous ouvrons ueditor.config.js et modifions la configuration window.UEDITOR_HOME_UR comme suit :

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

ueditor.config.jsLe fichier a de nombreuses configurations. Vous pouvez effectuer ici certaines configurations globales d'initialisation, telles que la largeur et la hauteur par défaut de l'éditeur :

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

Autres configurations de paramètres, Il est répertorié en détail dans ce fichier, ou se référer 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

Nous créons dans le fichier /src/components/ répertoireUE.vue, en tant que fichier de composant 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. Le composant

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

expose deux interfaces :

• value est le texte de l'éditeur

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

Utiliser ce composant dans d'autres pages

Créez simplement une page qui nécessite UEditor, puis utilisez celle packagée tout à l'heure dans cette page Composant UE.vue :

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

L'effet est le suivant :

De plus : Configuration requise côté serveur

Après avoir configuré le contenu ci-dessus, la console peut afficher 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 ! 
Lorsque nous téléchargeons des images ! » ou des vidéos dans l'éditeur, une réponse apparaîtra également. L'erreur est signalée car il n'y a pas d'interface de requête serveur de configuration Dans ueditor.config.js, configurez l'Url du serveur :

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

. Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

L'application Web implémente l'actualisation de la force arrière

Comment utiliser le générateur automatique dans ionic2

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!