PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV et WINDEV Mobile 26 !
  • Présentation du champ Editeur HTML
  • Créer un champ Editeur HTML
  • Caractéristiques du champ Editeur HTML
  • Localisation des images insérées dans le champ Editeur HTML
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget iOSApple WatchCatalystUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation du champ Editeur HTML
Le champ Editeur HTML permet à un utilisateur de créer et modifier des pages HTML. Ce champ est basé sur Chromium CEF.
Le ruban, intégré au champ, permet d'accéder à toutes les fonctionnalités nécessaires :
  • choix de la police, taille, couleur
  • choix de la graisse, italique, souligné, barré...
  • import de style CSS
  • gestion des images : déplacement, retaillage, redimensionnement, rotation...
  • édition des liens
  • undo/redo
  • copier/coller de texte brut, RTF, Docx, HTML
  • coller sans mise en forme
  • enregistrer
  • imprimer
  • export PDF
  • emojis
  • alignement
  • indentation
  • tableaux
  • correcteur orthographique
  • rechercher/remplacer
  • ...
iPhone/iPadWidget iOSCatalyst Le champ Editeur HTML est disponible uniquement à partir de iOS 13.
Créer un champ Editeur HTML
Pour créer un champ Editeur HTML :
  1. Sous le volet "Création", dans le groupe "Autres champs", déroulez "HTML" et sélectionnez "Editeur HTML".
  2. Cliquez dans la fenêtre à la position où le champ doit être créé. Le champ apparaît en création.
Versions 20 et supérieures
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Nouveauté 20
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Caractéristiques du champ Editeur HTML
L'onglet "Général" de la fenêtre de description du champ Editeur HTML propose les options suivantes :
  • Avec ruban : Permet d'afficher un ruban en haut du champ. Ce ruban propose les options permettant de manipuler le document HTML affichée dans le champ. Il est possible :
    • d'utiliser le ruban proposé par défaut. Dans ce cas, la zone "FI source du ruban" correspond à "Aucune".
    • de personnaliser le ruban proposé par défaut.
      Il suffit de sélectionner la fenêtre prédéfinie par défaut dans la zone "FI source du ruban". Dans ce cas, la fenêtre "FI_WinDevFAA_RubanEditeurHTML" est automatiquement intégrée dans votre projet. Cette fenêtre interne (disponible en français et anglais) peut être modifiée selon vos besoins. Cette fenêtre contient tout le code nécessaire à la gestion du champ Editeur HTML. Nous vous conseillons de vérifier les erreurs d'UI ainsi que le bon fonctionnement de la fenêtre après toute modification.
    • d'utiliser une fenêtre interne pour proposer un ruban spécifique.
      Vous pouvez utiliser n'importe quelle fenêtre interne de votre projet pour réaliser ce ruban.
  • Lors de l'utilisation d'un ruban, l'option "Appliquer le gabarit du projet sur le ruban" permet d'utiliser automatiquement le gabarit du projet sur le ruban sélectionné.
  • Adapter l'édition pour la saisie des E-mails : Si cette option est cochée, le champ Editeur HTML est adapté à la saisie des emails.
    Attention : cette option influe sur la localisation d'une image insérée dans le document HTML.
  • Autoriser le changement de document (Ouvrir, Nouveau, ... ) : Si cette option est cochée, l'utilisateur aura la possibilité de charger n'importe quel document dans le champ Editeur HTML. Dans le cas contraire, les options "Ouvrir" et "Nouveau" ne seront pas disponibles. Il sera uniquement possible d'éditer le document HTML présent dans le champ.
  • Permettre l'édition du code source HTML : Si cette option est cochée, le ruban du champ proposera un volet "Affichage" permettant de visualiser et de modifier le code source HTML.
  • Activer [Vérifier l'orthographe] par défaut : Permet d'indiquer si le correcteur orthographique doit être activé. Pour plus de détails, consultez Vérification d'orthographe basée sur les dictionnaires Hunspell.

Localisation des images insérées dans le champ Editeur HTML

Lorsqu'une image est insérée dans un document HTML, sa localisation sera dépendante de l'option "Adapter l'édition pour la saisie des E-mails" dans le volet "Général" de la description du champ Editeur HTML.
Option "Adapter l'édition pour la saisie des E-mails" cochée :
Dans ce mode, les images insérées ou collées ne sont jamais intégrées au code HTML généré. Seul le nom de l'image sera mémorisé. Le code HTML généré sera de la forme :
<img src="nom-image.png">
L'image est copiée dans le répertoire de travail du champ éditeur HTML.
Le répertoire de travail du champ Editeur HTML est fixé par la propriété RépertoireDeTravail.
Dans le cas d'une saisie HTML destinée à envoyer un email, le répertoire de travail qui contient les images pourra servir de dossier de base des images pour la fonction EmailImporteHTML. Exemple :
MonEmail est un Email
EDHTML_Nouvel_Email.Récupère(ehrValeur, EditeurHTMLRécupère_Callback)
 
PROCÉDURE INTERNE EditeurHTMLRécupère_Callback(valeur)
EmailImporteHTML(MonEmail, valeur, EDHTML_Nouvel_Email.RépertoireDeTravail)
FIN
Option "Adapter l'édition pour la saisie des E-mails" non cochée :
  • Si l'image est collée dans le champ depuis le presse-papiers, l'image est insérée dans le code HTML avec un encodage automatique en base 64.
    Le code HTML généré pour l'image sera donc de la forme :
    <img src="data/image/png;base64...">
  • Si l'image est insérée par le bouton "Image" du volet "Insertion" du ruban, deux cas se présentent :
    • L'option "Intégrer l'image dans la page" est cochée : le code HTML généré pour l'image sera donc de la forme :
      <img src="data/image/png;base64 ...">
    • L'option "Intégrer l'image dans la page" n'est pas cochée : le code HTML généré mémorise le nom de l'image et sera de la forme :
      <img src="nom-image.png">
Version minimum requise
  • Version 26
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire