DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Editeur HTML
  • 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
  • Encodage des caractères
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
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. Chromium CEF fonctionne uniquement avec Windows 10 ou supérieur.
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,
  • etc.
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.
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, dans le composant interne WDFAA. 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
EditeurHTMLRécupère(EDHTML_Nouvel_Email, 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">

Encodage des caractères

Le champ Editeur HTML encode les caractères en UTF8 afin d'assurer un rendu identique sur toutes les plateformes.
Si le champ Editeur HTML est utilisé pour envoyer un email, la fonction EditeurHTMLVersEmail va automatiquement insérer pour la partie HTML de l'email, l'entête <meta charset="utf-8"/>.
Si le code HTML présent dans le champ est récupéré avec la fonction EditeurHTMLRécupère puis échangé avec une application tierce (via insertion dans une base de données, appel d'un webservice SOAP ou d'une API REST, ...), deux possibilités :
  • Paramétrage de l'application tierce afin de traiter le HTML reçu comme étant encodé en UTF8.
  • Utilisation de la fonction UTF8VersChaine afin de modifier l'encodage du HTML récupéré.
Si aucune de ces solutions n'est appliquée, les accents par exemple ne seront pas correctement affichés.
Liste des exemples associés :
WD Mail Exemples complets (WINDEV) : WD Mail
[ + ] Cette application est un client mail complet développé en WINDEV. Il s'appuie sur les objets Email.
Ce client mail permet de récupérer et d'envoyer des emails en utilisant les protocoles POP, IMAP et SMTP.
Il est possible d'appliquer des filtres sur le courrier entrant.
L'écriture d'un email s'appuie sur le champ Editeur HTML.
L'affichage des emails utilise le champ Affichage HTML.
L'application permet de gérer plusieurs comptes emails différents.
Version minimum requise
  • Version 26
Documentation également disponible pour…
Commentaires
Manipulation d'image
Si on ajoute une image par copier/coller ou via le menu, la propriété ..Modifié est à 0.
Si on supprime l'image, idem.
En 27, les images sont quand même enregistrées.

La propriété passe à 1 uniquement si une saisie clavier est effectuée.

Egalement si on copie un texte avec des images (document Word par exemple), au collage les images ne sont pas présentes dans le champ. Il faut aller les récupérer une à une.
Laurent
30 mar. 2022
Ne pas oublier...
le dossier 'html' qui est créé au moment de la génération de l'exe. Ce dossier est à emmener au moment de l'installation sinon votre champ ne va pas marcher :~
Laurent
09 fév. 2022

Dernière modification : 26/03/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale