vue2 editor

Vue2editor

Un éditeur de texte riche facile à utiliser mais puissant et personnalisable alimenté par Quill.js et Vue.js

Afficher les documents

Notes de libération

Installer

Vous pouvez utiliser du fil ou du NPM

npm install vue2-editor

OU

yarn add vue2-editor

Usage

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; 

Nuxt.js

Ajoutez vue2-editor/nuxt à la section des modules de nuxt.config.js

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

Pour éviter de voir les avertissements de Vue sur une inadéquation dans le contenu, vous devrez envelopper le composant VueEditor avec le composant Nuxt client-only comme indiqué ici:

 < client-only >
  < VueEditor />
</ client-only > 

Accessoires

Nom	Taper	Défaut	Description
coussodiques	Tableau	-	Déclarer les modules Quill pour s'inscrire
désactivé	Booléen	FAUX	Fixt to True to Disable Editor
EditorOptions	Objet	-	Propose un objet pour fusionner dans la configuration par défaut (ajouter des formats, modules de quill personnalisés, ect)
editortoolbar	Tableau	** Trop long pour la table. Voir l'exemple de la barre d'outils ci-dessous	Utilisez une barre d'outils personnalisée
identifiant	Chaîne	colonie	Définissez l'ID (nécessaire si plusieurs éditeurs dans la même vue)
espace réservé	Chaîne	-	Texte de l'espace réservé pour l'éditeur
UseCustomImageHandler	Booléen	FAUX	Gérer le téléchargement d'image au lieu d'utiliser la conversion par défaut en base64
modèle en V	Chaîne	-	Définissez le modèle V sur la propriété de contenu ou de données à laquelle vous souhaitez les lier

Événements

Nom	Paramètres	Description
se brouiller	penne	Émis sur l'événement blur
se concentrer	penne	Émis sur l'événement focus
ajoutant l'image	fichier, éditeur, cursorlocation	Émis lorsque useCustomImageHandler est vrai et que la photo est ajoutée à l'éditeur
assuré par l'image	fichier, éditeur, cursorlocation	Émis lorsque useCustomImageHandler est vrai et que la photo a été supprimée
changement de sélection	gamme, oldrange, source	Émis sur l'événement selection-change de Quill
changement de texte	delta, oldelta, source	Émis sur l'événement text-change de Quill

Exemples

Exemple - Configuration de base

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

Exemple - gestionnaire d'images personnalisé

Si vous choisissez d'utiliser le gestionnaire d'images personnalisé, un événement est émis lorsque la photo AA est sélectionnée. Vous pouvez voir ci-dessous que 3 paramètres sont passés.

1. Il passe le fichier à gérer comme vous avez besoin
2. L'instance de l'éditeur
3. La position du curseur au moment du téléchargement afin que l'image puisse être insérée à la position correcte sur le succès

Remarque En plus de cet exemple, j'ai créé un exemple de repo démontrant cette nouvelle fonctionnalité avec un serveur réel.

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

Exemple - Définissez le contenu après le chargement de la page

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

Exemple - en utilisant plusieurs éditeurs

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

Exemple - Barre d'outils personnalisée

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

Exemple - Enregistrer le contenu

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

Exemple - Utilisez un aperçu en direct

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

Comment utiliser des modules de quill personnalisés

Il existe deux façons d'utiliser des modules personnalisés avec Vue2Editor. Cela est dû en partie au fait qu'il y a eu des cas dans lesquels des erreurs sont lancées lors de l'importation et de la tentative de déclarer des modules personnalisés, et en partie parce que je pense que cela sépare bien les préoccupations.

Version 1 - Importez et inscrivez-vous vous-même

Vue2Editor exporte désormais Quill pour aider à ce processus.

1. Lors de l'importation de VueEditor, importez également Quill.
2. Importez vos modules personnalisés
3. Enregistrez les modules personnalisés avec Quill
4. Ajoutez la configuration nécessaire à l'objet editorOptions

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

Version 2 - Vous importez | Vue2Editor Registres

(Moyen recommandé)

1. Importez vos modules personnalisés
2. Utilisez l'hélice customModules pour déclarer un tableau de modules.
3. Ajoutez la configuration nécessaire pour ces modules de l'objet editorOptions sous modules comme vu ci-dessous

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

---

Développement

Vue2Editor utilise désormais POI pour le développement

• yarn dev : Exemple d'exécution en mode développement
• yarn docs : développement pour les documents
• yarn build : composant de construction dans les deux formats
• yarn lint : exécutez Eslint

Licence

Mit