Skip to main content

Widget Éditeur

AperçuLien direct vers 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 BaseLien direct vers Configuration de Base

Propriétés du WidgetLien direct vers Propriétés du Widget

NomLien direct vers 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èleLien direct vers 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éfautLien direct vers Contenu par Défaut

Valeur par DéfautLien direct vers 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'ÉditeurLien direct vers Fonctionnalités de l'Éditeur

Configuration de la Barre d'OutilsLien direct vers Configuration de la Barre d'Outils

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

Formatage du TexteLien direct vers 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 TexteLien direct vers 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 StructureLien direct vers 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éesLien direct vers 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 ContenuLien direct vers Gestion du Contenu

Accès au Contenu HTMLLien direct vers 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èglesLien direct vers Validation et Règles

Validation des ChampsLien direct vers Validation des Champs

Champ RequisLien direct vers 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éesLien direct vers 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'ÉcranLien direct vers Validation Basée sur l'Écran

Contrôle de VisibilitéLien direct vers 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éesLien direct vers 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 LayoutLien direct vers Styling and Layout

Placeholder TextLien direct vers Placeholder Text

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

Appearance OptionsLien direct vers Appearance Options

DimensionsLien direct vers Dimensions

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

CSS CustomizationLien direct vers CSS Customization

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

Responsive DesignLien direct vers 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 ConfigurationLien direct vers Advanced Configuration

Data IntegrationLien direct vers Data Integration

Template VariablesLien direct vers 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 IntegrationLien direct vers 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 FeaturesLien direct vers Accessibility Features

Keyboard NavigationLien direct vers Keyboard Navigation

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

Screen Reader SupportLien direct vers 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 ExamplesLien direct vers Usage Examples

Basic Rich Text EditorLien direct vers Basic Rich Text Editor

Editor Exmple Basic

Dynamic Content EditorLien direct vers Dynamic Content Editor

Editor Dynamic Content

Conditional EditorLien direct vers Conditional Editor

Editor Conditional

Best PracticesLien direct vers Best Practices

Content ManagementLien direct vers 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 ExperienceLien direct vers 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

PerformanceLien direct vers 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

TroubleshootingLien direct vers Troubleshooting

Common IssuesLien direct vers Common Issues

Editor Not LoadingLien direct vers Editor Not Loading

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

Content Not SavingLien direct vers Content Not Saving

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

Formatting IssuesLien direct vers Formatting Issues

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

Validation ProblemsLien direct vers Validation Problems

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

Performance OptimizationLien direct vers Performance Optimization

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

Integration NotesLien direct vers Integration Notes

Form IntegrationLien direct vers Form Integration

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

API IntegrationLien direct vers API Integration

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

Security ConsiderationsLien direct vers Security Considerations

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