ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Rich Text Area control
  • Présentation du champ Zone de Texte Riche
  • Champ d'une page
  • Créer un champ Zone de Texte Riche
  • Création du champ
  • Saisir du texte dans le champ Zone de Texte Riche
  • Insérer un lien dans le champ Zone de Texte Riche
  • Insérer une image dans le champ Zone de Texte Riche
  • Insérer une icône de police dans le champ Zone de Texte Riche
  • Caractéristiques du champ Zone de Texte Riche
WINDEV
WindowsLinuxJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac Catalyst
Autres
Procédures stockées
Présentation du champ Zone de Texte Riche

Champ d'une page

Le champ Zone de Texte Riche (également appelé ZTR) est un champ Libellé offrant de nombreuses possibilités de mise en page :
  • Mise en forme du texte,
  • Insertion d'images ou de liens,
  • Insertion d'icônes provenant de la police,
  • etc.
Le champ Zone de Texte Riche peut être utilisé pour mettre en forme une partie texte d'un site.
En édition, le champ Zone de Texte Riche HTML permet au développeur de saisir le texte à afficher (avec toutes les options de mise en forme).
En exécution, le champ Zone de Texte Riche HTML permet à l'utilisateur de visualiser un texte avec mise en forme, images et liens.
Créer un champ Zone de Texte Riche

Création du champ

Pour créer un champ de type Zone de Texte Riche :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Zone de Texte Riche".
    Créer un champ Zone de Texte Riche
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.

Saisir du texte dans le champ Zone de Texte Riche

Pour saisir du texte dans le champ Zone de Texte Riche :
  1. Sélectionnez le champ.
  2. Cliquez sur le champ : un bandeau jaune apparaît autour du champ et le champ passe en mode édition.
  3. En mode édition :
    • vous pouvez directement saisir votre texte. Vous pouvez par exemple coller un texte provenant d'un logiciel tel que Word : la mise en forme sera conservée.
    • le ruban de l'éditeur s'adapte à la saisie dans le champ : toutes les options d'édition disponibles sont affichées :
      Options d'édition
      Ces options d'édition sont regroupées en 4 catégories :
      • Police : permet de spécifier les attributs de police du texte sélectionné.
      • Paragraphe : permet de spécifier les attributs des paragraphes (retraits, puces, listes, centrage et justification)
      • Style CSS - Sémantique : permet d'associer un style CSS et une sémantique au texte sélectionné.
      • Champs : permet d'ajouter des champs dans le champ Zone de Texte Riche :
        • un champ Image,
        • un champ Lien,
        • une icône provenant de la police,
        • un autre champ : tous les champs du volet "Création" sont disponibles.

Insérer un lien dans le champ Zone de Texte Riche

Pour insérer un lien dans le champ Zone de Texte Riche :
  1. Entrez en édition dans le champ Zone de Texte Riche.
  2. Sélectionnez le texte à transformer en lien.
  3. Sous le volet "Texte", dans le groupe "Champs", cliquez sur "Lien". La fenêtre de description du lien apparaît. Cette fenêtre permet de spécifier les caractéristiques du lien. Vous pouvez définir l'action associée au lien dans l'onglet "Général".
Remarques :
  • Lorsqu'un lien est inséré dans le champ Zone Texte Riche, ce lien correspond à un champ Lien. Ce champ est contenu dans la Zone de Texte Riche et pourra être manipulé par programmation par son nom.
  • La liste des champs contenus dans le champ Zone de Texte Riche est affichée dans l'onglet "Général" de la description du champ Zone de Texte Riche.
  • Pour créer un lien dans un champ Zone de Texte Riche, il est également possible de réaliser un drag and drop d'un champ Lien existant dans la page.

Insérer une image dans le champ Zone de Texte Riche

Pour insérer une image dans le champ Zone de Texte Riche :
  1. Entrez en édition dans le champ Zone de Texte Riche.
  2. Positionnez-vous à l'endroit où l'image doit être insérée.
  3. Sous le volet "Texte", dans le groupe "Champs", cliquez sur "Image".
  4. La fenêtre de description de l'image apparaît. Cette fenêtre permet de spécifier les caractéristiques de l'image. L'onglet "Général" permet notamment de :
    • spécifier l'image à afficher,
    • spécifier le mode d'habillage de l'image et le mode d'affichage de l'image.
Remarques :
  • Lorsqu'une image est insérée dans le champ Zone Texte Riche, cette image correspond à un champ Image. Ce champ est contenu dans la Zone de Texte Riche et pourra être manipulé par programmation par son nom.
  • La liste des champs contenus dans le champ Zone de Texte Riche est affichée dans l'onglet "Général" de la description du champ Zone de Texte Riche.
  • Pour créer une image dans un champ Zone de Texte Riche, il est également possible de réaliser un drag and drop d'un champ Image existant dans la page.

Insérer une icône de police dans le champ Zone de Texte Riche

Pour ajouter une icône dans un libellé HTML :
  1. Positionnez le curseur de la souris dans le texte HTML à modifier.
  2. Cliquez sur le bouton Icônes de police .
  3. La fenêtre suivante s'affiche.
  4. Sélectionnez la famille d'icônes dans la liste des polices.
  5. Double-cliquez sur l'icône voulue ou sélectionnez l'icône et validez la fenêtre. L'icône est ajoutée dans le libellé HTML à la position du curseur.
Attention : La configuration de projet courante doit gérer les chaînes Unicode en exécution. Cette option est disponible dans la fenêtre de description de la configuration.
Caractéristiques du champ Zone de Texte Riche
Les principales caractéristiques du champ Zone de Texte Riche sont accessibles par la fenêtre de description du champ. La fenêtre de description du champ Zone de Texte Riche permet notamment :
  • d'éditer le code source HTML du champ (onglet "Général"). Ce code peut être modifié directement sous l'éditeur. Il est possible de :
    • Ajouter du code HTML. Dans la mesure du possible, le résultat du code HTML ajouté sera visualisé sous l'éditeur (seules les animations ne sont pas gérées). Ces ajouts sont mémorisés dans le champ.
    • Supprimer une partie du code HTML. Par exemple, il est possible de supprimer le code HTML correspondant à un lien.
    • Compléter le code HTML généré. Il est par exemple possible d'ajouter des balises spécifiques pour l'affichage d'une bulle d'aide.
  • de visualiser la liste des champs contenus dans la zone (onglet "Général").
  • d'afficher la fenêtre de description des champs contenus dans la zone (bouton "Editer" de l'onglet "Général").
  • de définir les options d'interface (onglet "UI"). Il est possible de définir :
    • si le champ Zone de texte Riche peut être superposé.
    • la sémantique associée au champ Zone de Texte Riche.
Remarques :
  • La fenêtre de description des champs contenu dans le champ Zone de Texte Riche n'est pas identique à celle du champ hors zone de texte riche. En effet, une partie des informations (notamment la position et le style) est définie au niveau du champ Zone de Texte Riche et non au niveau du champ Lien ou du champ Image.
  • Sur un champ Libellé contenu dans un champ Zone de Texte Riche, il est possible de définir une ancre via la fenêtre de description du champ Libellé (onglet "Général", option "Définir comme une ancre").
Minimum version required
  • Version 19
Comments
Click [Add] to post a comment

Last update: 09/13/2024

Send a report | Local help