Skip to main content

Widget Éditeur

Aperçu​

Le widget Éditeur fournit une interface d'édition de texte enrichi puissante pour créer et modifier du contenu formaté. Il est construit sur le DecoupledEditor de CKEditor et offre un ensemble complet d'outils de formatage et d'options de personnalisation.

Widget Éditeur

Configuration de Base​

Propriétés du Widget​

Nom​

  • Champ: Nom
  • Description: Nom d'affichage du widget
  • Type: Saisie de texte
  • Utilisation: Utilisé pour l'identification et peut être référencé dans les messages de validation

Variable/Modèle​

  • Champ: Variable/Modèle
  • Description: La propriété du modèle de données qui stockera le contenu de l'éditeur
  • Type: Saisie de texte
  • Requis: Oui
  • Utilisation: Définit le nom de la variable utilisée pour stocker et récupérer le contenu HTML de l'éditeur

Contenu par Défaut​

Valeur par Défaut​

  • Champ: Valeur par Défaut
  • Description: Contenu HTML initial affiché dans l'éditeur
  • Configuration: Cliquez sur le bouton "Modifier" pour ouvrir l'éditeur HTML
  • Fonctionnalités:
    • Formatage de texte enrichi
    • Édition du code source HTML
    • Aperçu en direct
    • Supporte le contenu dynamique avec des variables de template
Configuration de Base de l'Éditeur

Fonctionnalités de l'Éditeur​

Configuration de la Barre d'Outils​

L'éditeur comprend une barre d'outils complète avec les outils suivants :

Formatage du Texte​

  • Titres: Styles de titres H1 à H6
  • Famille de Police: Modifier la police de caractères
  • Taille de Police: Ajuster la taille du texte
  • Alignement du Texte: Gauche, centre, droite, justifié
  • Couleur de Police: Modifier la couleur du texte
  • Couleur d'Arrière-plan: Surligner le texte avec des couleurs d'arrière-plan

Style de Texte​

  • Gras: Mettre le texte en gras
  • Italique: Mettre le texte en italique
  • Barré: Barrer le texte
  • Souligné: Souligner le texte

Listes et Structure​

  • Listes à Puces: Créer des listes non ordonnées
  • Listes Numérotées: Créer des listes ordonnées
  • Réduire/Augmenter le Retrait: Ajuster l'indentation des listes et des paragraphes
  • Citations: Formater le texte sous forme de citations

Fonctionnalités Avancées​

  • Liens: Insérer et modifier des hyperliens
  • Tableaux: Insérer et formater des tableaux
  • Annuler/Rétablir: Naviguer dans l'historique des modifications

Gestion du Contenu​

Accès au Contenu HTML​

  • Liaison de Données: Le contenu est automatiquement enregistré dans la variable de modèle spécifiée
  • Format: Stocké en balisage HTML
  • Mises à Jour en Temps Réel: Les mises à jour du contenu déclenchent des événements de changement
Fonctionnalités de l'Éditeur

Validation et Règles​

Validation des Champs​

Champ Requis​

  • Configuration: Défini dans la section Validation
  • Par Écran: Peut être configuré différemment pour chaque type d'écran/appareil
  • Conditions Avancées: Support des exigences conditionnelles utilisant des expressions JavaScript

Règles de Validation Personnalisées​

  • Emplacement: Section Règles dans la configuration du widget
  • Types Disponibles:
    • Validation de longueur (nombre minimum/maximum de caractères)
    • Correspondance de motif (expressions régulières)
    • Fonctions de validation JavaScript personnalisées
  • Messages d'Erreur: Messages d'échec de validation personnalisables
Validation des Champs de l'Éditeur

Validation Basée sur l'Écran​

Contrôle de Visibilité​

  • Disponible: Si le widget apparaît sur des écrans spécifiques
  • Visible: Visibilité dynamique basée sur des conditions
  • Requis: Si le champ est obligatoire sur chaque écran
  • Désactivé: Si le champ est en lecture seule sur des écrans spécifiques
Contrôle de Visibilité de l'Éditeur

Conditions Avancées​

  • Expressions JavaScript: Utiliser des variables de template dans les conditions
  • Évaluation Dynamique: Les conditions sont réévaluées lorsque les variables dépendantes changent
  • Support Multi-écrans: Règles différentes pour mobile, tablette, ordinateur de bureau
Editor Advanced Conditions

Styling and Layout​

Placeholder Text​

  • Field: Placeholder (under Style section)
  • Description: Text displayed when editor is empty
  • Usage: Provides guidance to users about expected content

Appearance Options​

Dimensions​

  • Width: Custom width specification (CSS units)
  • Height: Custom height specification (CSS units)
  • Layout: Block or inline display mode
  • Border: Toggle border display

CSS Customization​

  • Class Names: Add custom CSS classes
  • Dynamic Classes: Conditional class application based on data
  • Theme Integration: Inherits from global interface styling

Responsive Design​

  • Screen Adaptation: Automatically adjusts to different screen sizes
  • Touch Support: Optimized for touch interactions on mobile devices
  • Toolbar Responsiveness: Toolbar adapts to available space
Editor Styling

Advanced Configuration​

Data Integration​

Template Variables​

  • Syntax: Use ${} notation for dynamic content
  • Model Access: Reference other form data in default content
  • Global Variables: Access system-wide variables and settings

Form Integration​

  • Validation Participation: Integrates with form-wide validation
  • Submission Handling: Content included in form data submission
  • Reset Capabilities: Can be cleared or reset to default values

Accessibility Features​

Keyboard Navigation​

  • Full Support: Complete keyboard accessibility
  • Tab Order: Proper tabbing sequence
  • Shortcuts: Standard editing keyboard shortcuts

Screen Reader Support​

  • ARIA Labels: Proper labeling for assistive technologies
  • Semantic HTML: Generated content maintains semantic structure
  • Focus Management: Clear focus indicators and management

Usage Examples​

Basic Rich Text Editor​

Editor Exmple Basic

Dynamic Content Editor​

Editor Dynamic Content

Conditional Editor​

Editor Conditional

Best Practices​

Content Management​

  1. Structure Content: Use headings and lists for better organization
  2. Consistent Formatting: Maintain consistent styling throughout content
  3. Link Management: Ensure all links are valid and properly formatted
  4. Image Optimization: Keep images appropriately sized for web use

User Experience​

  1. Clear Placeholders: Provide helpful placeholder text
  2. Appropriate Sizing: Size editor appropriately for expected content
  3. Validation Feedback: Provide clear validation messages
  4. Save Indicators: Consider adding save status indicators for long content

Performance​

  1. Content Length: Be mindful of very long content and performance impact
  2. Image Handling: Optimize images before inserting
  3. Clean HTML: Regularly clean up unnecessary HTML formatting
  4. Mobile Optimization: Test editor performance on mobile devices

Troubleshooting​

Common Issues​

Editor Not Loading​

  • Verify CKEditor scripts are properly loaded
  • Check for JavaScript errors in browser console
  • Ensure proper widget configuration

Content Not Saving​

  • Verify model variable name is correct and unique
  • Check form submission handling
  • Ensure proper change event binding

Formatting Issues​

  • Check for conflicting CSS styles
  • Verify HTML content is properly structured
  • Test across different browsers and devices

Validation Problems​

  • Verify validation rules syntax
  • Check conditional expressions for errors
  • Ensure required fields are properly marked

Performance Optimization​

  • Limit toolbar options if not needed
  • Consider lazy loading for multiple editors
  • Optimize default content size
  • Regular cleanup of generated HTML

Integration Notes​

Form Integration​

  • Participates in form validation cycle
  • Content included in form submission data
  • Supports form reset and clear operations

API Integration​

  • Content can be sent to backend APIs
  • Supports real-time collaboration features
  • Can integrate with content management systems

Security Considerations​

  • HTML content should be sanitized on backend
  • Consider XSS protection for user-generated content
  • Validate content length and structure server-side