Les champs de texte standards (textarea) offrent une saisie de texte brut, sans possibilité de mise en forme. Un éditeur de texte enrichi (Rich Text Editor - RTE) étend ces fonctionnalités pour permettre la modification du style du contenu, l'insertion d'images, et d'autres options de formatage, similaires à un traitement de texte.

Installation des dépendances

Pour utiliser Quill avec Vue.js, installez les paquets nécessaires via npm :

npm install quill
npm install vue-quill-editor

Importation globale

Intégrez le plugin vue-quill-editor dans votre point d'entrée principal (par exemple, main.js). Il est crucial d'importer également les feuilles de style CSS de Quill pour assurer l'affichage correct de l'éditeur. Vous pouvez choisir parmi quill.core.css, quill.snow.css, et quill.bubble.css, ou les importer dans des composants spécifiques si nécessaire.

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

Configuration et utilisation

1. Perosnnalisation de la barre d'outils

La barre d'outils de Quill est hautement configurable. Voici un exemple de configuration définissant divers éléments de formatage :

const toolbarOptions = [
 ['bold', 'italic', 'underline', 'strike'], // Formatage de base
 ['blockquote', 'code-block'], // Blocs de contenu

 [{ 'header': 1 }, { 'header': 2 }], // Niveaux de titre
 [{ 'list': 'ordered' }, { 'list': 'bullet' }], // Listes ordonnées et non ordonnées
 [{ 'script': 'sub' }, { 'script': 'super' }], // Exposants et indices
 [{ 'indent': '-1' }, { 'indent': '+1' }], // Retrait de texte
 [{ 'direction': 'rtl' }], // Direction du texte

 [{ 'size': ['small', false, 'large', 'huge'] }], // Taille de police
 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // Sélection de titre

 [{ 'color': [] }, { 'background': [] }], // Couleurs de texte et de fond
 [{ 'font': [] }], // Choix de police
 [{ 'align': [] }], // Alignement du texte
 ['image'], // Insertion d'images
 ['clean'] // Nettoyage de la mise en forme
]

Les options de la barre d'outils peuvent être regroupées en plusieurs catégories :

• Fonctions directes : Commandes simples comme bold, italic, underline, strike, blockquote, code-block, formula, image, video, clean. Elles sont ajoutées sous forme de chaînes de caractères dans un tableau : ['bold', 'italic'].
• Options avec valeurs prédéfinies : Commandes nécessitant des valeurs spécifiques, telles que le niveau de titre (header), le type de liste (list), le type de script (script), le niveau d'indentation (indent), ou la direction du texte (direction). Elles sont configurées sous forme d'objets dans des tableaux : [{ 'header': 1 }, { 'header': 2 }].
• Listes déroulantes : Options offrant une sélection parmi plusieurs choix, comme la taille de police (size), les niveaux de titre (header). La configuration inclut un tableau de valeurs possibles : [{ 'size': ['small', false, 'large', 'huge'] }].
• Options à tableau vide : Commandes comme color, background, font, align, qui ouvrent des sélecteurs ou des menus sans valeurs prédéfinies dans la configuration initiale. Elles sont représentées par des tableaux vides : [{ 'color': [] }, { 'background': [] }].

2. Utilisation dans un composant Vue (avec téléversement d'images)

Voici comment intégrer le composant quill-editor dans un template Vue, en utilisant element-ui pour la gestion du téléversement d'images.

<el-form-item label="Contenu">
   <el-upload
       class="avatar-uploader"
       :action="serverUrl"
       name="file"
       :show-file-list="false"
       :on-success="handleImageUploadSuccess"
       :on-error="handleImageUploadError"
       :before-upload="validateImageUpload"
   />
   <quill-editor
       ref="richTextEditor"
       v-model="formData.content"
       :options="editorOptions"
       @blur="onEditorBlur"
       @focus="onEditorFocus"
       @change="onEditorChange"
   />
</el-form-item>

Dans la partie script de votre composant Vue :

data() {
   return {
       formData: {
           content: ''
       },
       serverUrl: 'URL_DE_VOTRE_SERVEUR_UPLOAD', // Remplacez par votre URL
       editorOptions: {
           modules: {
               toolbar: toolbarOptions // Utilisez la configuration de la barre d'outils définie précédemment
           }
       }
   };
},
methods: {
   // ... autres méthodes ...
   onEditorBlur(quill) {
       console.log('editor blur!', quill)
   },
   onEditorFocus(quill) {
       console.log('editor focus!', quill)
   },
   onEditorChange({ quill, html, text }) {
       console.log('editor change!', quill, html, text)
   },
   // ... méthodes de téléversement d'images ...
}

3. Validation avant le téléversement d'image

Implémentez une fonction pour valider le type et la taille du fichier avant son téléversement afin d'éviter les erreurs côté serveur et d'améliorer l'expérience utilisateur.

validateImageUpload(file) {
       const allowedTypes = ['jpeg', 'jpg', 'png'];
       const fileExtension = file.name.split('.').pop().toLowerCase();

       if (!allowedTypes.includes(fileExtension)) {
           this.$message.error('Le fichier doit être au format JPG ou PNG.');
           return false;
       }

       const maxSizeKB = 150;
       const minSizeKB = 40;
       const fileSizeKB = file.size / 1024;

       if (fileSizeKB < minSizeKB || fileSizeKB > maxSizeKB) {
           this.$message.error(`La taille du fichier doit être comprise entre ${minSizeKB}KB et ${maxSizeKB}KB.`);
           return false;
       }
       // Optionnel : afficher un indicateur de chargement
       // this.isUploadingImage = true;
       return true;
   },

4. Insertion de l'image après téléversement réussi

Une fois l'image téléversée avec succès sur votre serveur, vous devez récupérer son URL et l'insérer dans l'éditeur au niveau du curseur. La réponse du serveur doit contenir l'URL de l'image.

handleImageUploadSuccess(response, file) {
       try {
           const quillInstance = this.$refs.richTextEditor.quill;
           if (response && response.success) { // Adaptez la condition à la réponse de votre API
               const imageUrl = response.data.url; // Assurez-vous que 'data.url' correspond à la structure de votre réponse
               const cursorPosition = quillInstance.getSelection()?.index || 0;
               quillInstance.insertEmbed(cursorPosition, 'image', imageUrl);
               quillInstance.setSelection(cursorPosition + 1); // Déplacer le curseur après l'image
           } else {
               this.$message.error('Échec de l\'insertion de l\'image.');
           }
       } catch (error) {
           console.error("Erreur lors de l'insertion de l'image:", error);
           this.$message.error('Une erreur est survenue lors de l\'insertion de l\'image.');
       } finally {
           // Masquer l'indicateur de chargement si utilisé
           // this.isUploadingImage = false;
       }
   },
   handleImageUploadError() {
       // Masquer l'indicateur de chargement si utilisé
       // this.isUploadingImage = false;
       this.$message.error('Échec du téléversement de l\'image.');
   },

Note importante : Par défaut, vue-quill-editor peut convertir les images téléversées en données Base64 et les insérer directement. Pour des images volumineuses ou en grand nombre, cela peut entraîner des requêtes HTTP très longues et potentiellement des erreurs. L'approche recommandée est de téléverser l'image sur votre serveur, puis d'insérer uniquement l'URL de l'image dans l'éditeur.