Editeur de texte enrichi

Le composant Éditeur de texte permet à vos utilisateurs de prendre des notes efficacement et de manière interactive directement dans votre application.

Cette fonctionnalité est idéale pour :

• Applications de e-learning : permettre aux apprenants d’annoter leurs cours
• Journaux personnels : offrir un espace d’expression libre
• Applications de prise de notes : créer des notes enrichies avec mise en forme
• Formulaires avancés : capturer des réponses détaillées

Insérer l’éditeur de texte

Pour intégrer l’éditeur de texte dans votre projet :

1. Accédez à l’onglet Composants.
2. Sélectionnez et insérez le composant Éditeur de texte.
3. Glissez et déposez le composant à l’emplacement désiré sur votre interface.

Options de style

L’éditeur de texte offre une multitude d’options pour personnaliser le style et l’apparence du texte, afin d’adapter l’interface à l’identité visuelle de votre application.

Pour utiliser ces options :

1. Dans les propriétés du composant, cliquez sur Oui pour activer la Barre d’outils.
2. Sélectionnez les éléments à afficher sur la barre d’outils :
   • En-tête : choix de taille et de format pour les titres.
   • Style : gras, italique, souligné.
   • Bloc : citation, code.
   • Média : ajout d’images ou de vidéos.
   • Liste : création de listes à puces ou numérotées.
   • Script : superscript ou subscript.
   • Indentation : augmenter ou diminuer l’indentation.
   • Direction : alignement du texte à gauche, à droite, ou centré.
   • Couleur : sélection de la couleur de texte ou d’arrière-plan.
   • Police : choix de la police de caractères.
   • Alignement : alignement du texte dans le bloc.
   • Nettoyer / Historique : options pour nettoyer la mise en forme ou annuler/refaire les modifications.

Vous pouvez également définir un Texte par défaut et utiliser le data binding pour lier le contenu de l’éditeur à une variable ou à une autre propriété dans votre application.

Déclencheurs

Voici la liste des déclencheurs disponibles depuis le composant :

• Validé : se déclenche quand le contenu est validé (manuellement ou si Validation auto est activée).
• Ciblé : se déclenche quand l’éditeur reçoit le focus (est ciblé par l’utilisateur).
• Perte de focus : se déclenche quand l’éditeur perd le focus (l’utilisateur clique en dehors de l’éditeur).

Conserver le contenu entre les sessions

Par défaut, le contenu de l’éditeur n’est pas sauvegardé. Pour le conserver entre les sessions, deux options s’offrent à vous :

Sauvegarde locale (Base de données PandaSuite)

Idéale pour des notes personnelles sans synchronisation multi-appareils.

1. Créez une Base de données PandaSuite avec une propriété de type Clé / Valeur (pour le contenu enrichi) ou Texte (pour du texte simple).
2. Activez Validation auto dans les propriétés de l’éditeur.
3. Sur le déclencheur Validé, utilisez Agir sur une source de donnée → Base de données PandaSuite → Créer/modifier une donnée (local) et définissez la valeur avec le Contenu de l’éditeur.
4. Au chargement de l’écran, utilisez Agir sur un composant → Éditeur de texte → Définir le contenu en passant la valeur depuis votre base.

Sauvegarde à distance (Firebase)

Idéale pour la synchronisation multi-appareils et la sauvegarde cloud.

Prérequis : Projet Firebase configuré avec le composant Firebase Session et authentification active.

1. Sur le déclencheur Validé, utilisez Agir sur une base de données → Session Firebase → Modifier la donnée (fonction Définir) avec le Contenu de l’éditeur.
2. Au chargement de l’écran, utilisez Agir sur un composant → Éditeur de texte → Définir le contenu en passant la valeur depuis Firebase.

Agir sur l’éditeur de texte

Sélectionnez un objet déclencheur, cliquez sur Actions et créez une nouvelle action.

Choisissez votre déclencheur (par exemple au simple tap) et l’action Agir sur un composant.

Sélectionnez votre composant Éditeur de texte. Voici les actions disponibles :

• Valider
• Définir le texte
• Définir le contenu (à privilégier pour le contenu enrichi et la restauration de notes sauvegardées)
• Supprimer le texte / contenu
• Cibler le texte

En intégrant l’Éditeur de texte dans votre application, vous offrez à vos utilisateurs un outil puissant pour la création et la gestion de contenu textuel. Grâce à sa personnalisation étendue et ses options interactives, vous pouvez créer une expérience utilisateur enrichissante et adaptée à vos besoins spécifiques.