L'éditeur HTML de documentation

Présentation

L'éditeur graphique HML implémente les seules fonctions nécessaires à la rédaction d'un paragraphe de la documentation ou à un paragraphe d'aide en ligne, il ne produit pas une page HTML complète.

Il reste possible de dépasser les capacités de l'éditeur graphique en intervenant directement dans la source HTML, mais l'utilisation de la fonction de nettoyage peut alors supprimer les balises non autorisées ajoutées de cette manière.

Attention : Il est impératif de sortir de l'éditeur graphique après avoir effectué une modification afin de dégriser le bouton   de la fonction Documentation  et d'enregistrer sur le serveur la fiche modifiée.

Icônes, boutons et raccourcis clavier

Icônes du bandeau

Icône	Fonction	Exemple
	Création d'un paragraphe	Texte.
	Création d'un titre	Texte
	création d'un sous-titre	Texte
	Texte gras ou normal	Texte
	Texte italique ou normal	Texte
	Texte souligné ou normal	Texte
	Alignement  gauche	Texte
	Alignement centre	Texte
	Justification	Texte
	Alignement droit	Texte
	Liste	Texte 1 Texte 2
	Décalage droit	Texte
	Annulation d'une action décalage droit	Texte
	Création d'un lien hypertexte	Texte
	Image
	Bouton
	Tableau	Texte 1 Texte 2 Texte 3 Texte 4
	Nettoyage sélectif du HTML
	Affichage et modification de la source HTML
	Alerte indiquant un problème dans le html. Permet de visualiser et de modifier le code html produit.

Boutons boîte de dialogue

	Enregistrer
	Annuler

Principaux raccourcis clavier

Enter	Création d'un paragraphe
Shift/Enter	Création d'une nouvelle ligne
Ctrl/c	Copier
Ctrl/v	Coller
Ctrl/x	Supprimer
Ctrl/a	Sélectionner tous les éléments
Ctrl/z	Annule l'action précédente
Double clic	suivant objet

Gestion des listes

Créer un liste simple

Appuyer sur l'icône liste  et saisir le texte. Appuyer sur la touche "enter" pour saisir une seconde ligne ou deux fois sur la touche "enter" pour sortir de la liste.

• Ligne 1
• Ligne 2

Pour saisir plusieurs lignes de texte au niveau d'une seule ligne de la liste appuyer simultanément sur les touches "shift" et "enter' pour créer les lignes suivantes.

• Ligne 1
• Ligne 2
  Ligne 2-1

Créer une liste à plusieurs niveaux

Créer une liste simple puis sélectionner les lignes à modifier et appuyer sur l'icône décalage droit autant de fois que l'on souhaite "descendre" dans les niveaux, l'icône décalage gauche permet d'effectuer l'opération inverse.
Seuls les deux premiers niveaux sont symbolisés par des "bullets".

• Ligne 1
• Ligne 2
  Ligne 2-1
• Ligne 3 niveau 2
• Ligne 4 niveau 2
• Ligne 5 niveau
  Ligne 5-1 niveau 3
• Ligne 6 niveau
  Ligne 6-1 niveau 4
• Ligne 7

Les liens hypertextes

Création

Sélectionner un texte ou une image puis appuyer sur l'icône lien. Dans la boite de dialogue saisir l'URL localisant la page et le cas échéant l'ancre destination (l'URL doit être relative à la page en cours de rédaction). Valider.

Modification

Positionner le curseur sur le texte lien et appuyer sur l'icône lien ou double-cliquer sur le lien. La boite de dialogue apparaît avec la valeur du lien. Modifier le lien et valider.

Suppression

Positionner le curseur sur le texte lien et appuyer sur l'icône lien. La boite de dialogue apparaît avec la valeur du lien. Supprimer l'URL et valider.

Gestion des images

Création

Il est à noter que, dans l'éditeur de documentation, les images sont normalement stockées dans la base comme des documents joints.

L'image apparaît sous la forme suivante:

Elle peut-être redimensionnée par les poignées.

Modification

Suppression

Gestion des boutons

Création

Positionner le curseur à l'endroit de l'insertion du bouton puis appuyer sur l'icône bouton. Double-cliquer sur le bouton créé pour saisir le libellé du bouton.

Modification

Double-cliquer sur le bouton créé pour saisir le libellé.

Suppression

Sélectionner le bouton et appuyer sur la touche "Delete" ou Ctrl/X.

Gestion des tableaux

Création

Positionner le curseur à l'endroit de l'insertion du tableau puis appuyer sur l'icône tableau. Saisir le nombre de colonnes, le nombre de lignes,  la taille en pixel des bordures (0 si pas de bordure) et choisir si la première ligne du tableau est une ligne d'en-tête puis valider.

Exemple :

Tableau sans en-tête

Tableau avec en-tête

Modification

Sélectionner le tableau de façon à faire apparaître les poignées puis cliquer sur l'icône tableau effectuer les modifications puis valider.
En cas de modification du nombre de lignes ou du nombre de colonnes ce sont les lignes et colonnes en fin de tableau qui seront affectées.
Lorsqu'un tableau sans en-tête est modifié en tableau avec en-tête, il est nécessaire d'intervenir sur chaque contenu de la première ligne pour passer en gras chaque élément, l'opération inverse est à faire lorsqu'un tableau avec en-tête est passé en tableau sans en-tête. 
Les tabulations permettent de passer d'une cellule à la suivante et d'insérer une ligne en fin de tableau. 
Un tableau peut-être redimensionné par les poignées.

Suppression

Sélectionner le tableau de façon à faire apparaître les poignées (clic sur une bordure) et appuyer sur "Delete" ou Ctrl/X.

Nettoyage du code HTML

Cette fonction permet de supprimer les balises html non autorisées. Elle doit être utilisée notamment après un copier/coller d'un texte à partir d'une documentation existante.

Les balises HTML autorisées

Exemple de nettoyage

Le code html suivant

<DIV class=Section1>
<H4><SPAN style="text-shadow: none">Texte 1<?xml:namespace prefix = o /><o:p></o:p></SPAN></H4>
<P class=MsoBodyText>Texte 2.</P>
<P class=MsoBodyText>Texte 2</P>
<H5><SPAN style="text-shadow: none">Texte 4<o:p></o:p></SPAN></H5>
<P class=MsoBodyText>Text 5</P>
<P class=MsoBodyText><?xml:namespace prefix = v /><v:shapetype id=_x0000_t75 stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"></o:lock></v:shapetype><v:shape id=_x0000_i1025 style="WIDTH: 382.5pt; HEIGHT: 136.5pt" o:ole="" type="#_x0000_t75"><v:imagedata o:title="" src="./Listes%20de%20picking_fichiers/image001.png"></v:imagedata></v:shape></P>
<P class=MsoBodyText><v:shape id=_x0000_i1026 style="WIDTH: 396pt; HEIGHT: 138pt" o:ole="" type="#_x0000_t75"><v:imagedata o:title="" src="./Listes%20de%20picking_fichiers/image003.png"></v:imagedata></v:shape></P>
<P class=MsoBodyText>&nbsp;<o:p></o:p></P>
</DIV>

deviendra

<H4>Texte 1</H4>
<P class="">Texte 2.</P>
<P class="">Texte 2</P>
<H5>Texte 4</H5>
<P class="">Text 5</P>
<P class=""></P>
<P class=""></P>
<P class="">&nbsp;</P>

Attention

Il n'y a pas de retour arrière par Ctrl/z possible sur cette commande.
La commande nettoyage supprime Les .

Editeur textuel

L'éditeur permet de visualiser et d'éditer  la source HTML. Le texte et les balises modifiés viennent remplacer le texte et les balises HTML de l'éditeur graphique au moment de l'enregistrement (bouton ).

Toutes les balises saisies dans l'éditeur textuel ne faisant par partie de la liste les balises autorisées sont purgées par la fonction de nettoyage. Si cette fonction n'est pas utilisée, les balises non autorisées enrichiront la documentation générée finale.

On peut occasionnellement constater dans l'éditeur textuel la présence d'url non conformes dans les attributs src ou href. Il est inutile de les modifier, ils seront normalisés au moment de la remontée des données vers le serveur.