Utiliser Quill.js / Blogs / Perficient

Les éditeurs de texte enrichi sont essentiels pour de nombreuses applications Web, permettant aux utilisateurs de formater du texte, d’ajouter des liens et même d’insérer des médias directement dans leur contenu. Plume.js est un éditeur open source puissant et personnalisable qui s’intègre parfaitement aux frameworks modernes comme Vue.js. Ce didacticiel nous guidera à travers les étapes de configuration et d’intégration de Quill.js dans un projet Vue.js pour créer un éditeur de texte riche dynamique.

À la fin de ce guide, vous disposerez d’un éditeur de texte riche entièrement fonctionnel et adapté à vos besoins dans votre application Vue.js.

Prérequis :

Avant de plonger dans le code, assurez-vous que vous disposez de la configuration suivante et des connaissances de base sur :

Étape 1 : Installation de Quill.js dans votre application Vue

Tout d’abord, nous devons installer Quill.js dans votre projet Vue. Ouvrez votre terminal, accédez au répertoire de votre projet, puis exécutez cette commande :

Cette commande installe Quill.js et l’enregistre en tant que dépendance dans votre projet.

Étape 2 : Création d’un composant Quill.js personnalisé pour l’édition de texte enrichi

Commençons par créer un nouveau composant Vue appelé Quill.vue. Ce composant encapsulera la logique d’initialisation et de gestion de l’instance de l’éditeur Quill.

Étape 3 : Création du modèle de l’éditeur Quill dans Vue.js

Définir la structure de base du modèle dans Quill.vue

Étape 4 : Importation de Quill.js et CSS

Importez la bibliothèque Quill.js et le CSS nécessaire pour le thème Snow.

Étape 5 : Configuration des options de la barre d’outils pour votre éditeur de texte enrichi Vue

Configurez les options de barre d’outils par défaut pour l’éditeur.

Cette configuration fournit des options de formatage de texte de base et des contrôles pour les listes et les liens.

Étape 6 : initialisation de l’éditeur Quill.js dans votre composant Vue

Dans le mounted hook de cycle de vie, initialisez l’éditeur Quill sur le div élément.

• this.$refs.div: accède au div où Quill.js sera rendu.
• new Quilljs(element, { ...DefaultToolbarOptions }): Initialise Quill.js avec les options de barre d’outils définies.
• quill.on('text-change'): configure un écouteur d’événement pour capturer les modifications de texte et mettre à jour le composant currentValuequi est émis vers le composant parent.

Étape 7 : Capturer les modifications de texte dans Quill.js avec Vue.js

Le @Watch le décorateur surveille value prop, garantissant que toutes les modifications apportées en externe sont reflétées dans l’éditeur.

Cela rend le composant réactif aux modifications apportées par son parent.

Étape 8 : Intégration de l’éditeur Quill.js dans votre application Vue.js

Enfin, utilisez le composant Quill dans un composant parent comme indiqué ci-dessous :

Dans ce didacticiel, nous avons parcouru les étapes pour intégrer Quill.js dans une application Vue.js, créant ainsi un éditeur de texte enrichi personnalisable. Cette configuration vous offre la flexibilité nécessaire pour créer un éditeur de texte riche en fonctionnalités adapté aux besoins de votre projet.

Que vous construisiez un système de gestion de contenu, une plateforme de blogs ou toute autre application nécessitant une édition de texte, Quill.js avec Vue.js fournit une solution robuste.