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

HTM_EDITOR_001.gif

Création d'un paragraphe

Texte.

HTM_EDITOR_002.gif

Création d'un titre

Texte 

HTM_EDITOR_003.gif

création d'un sous-titre
Texte

HTM_EDITOR_004.gif

Texte gras ou normal

Texte

HTM_EDITOR_005.gif

Texte italique ou normal

Texte

HTM_EDITOR_006.gif

Texte souligné ou normal

 Texte

HTM_EDITOR_007.gif

Alignement  gauche

Texte

HTM_EDITOR_008.gif

Alignement centre

Texte

HTM_EDITOR_009.gif

Justification

 Texte

HTM_EDITOR_010.gif

Alignement droit

 Texte

HTM_EDITOR_011.gif

Liste
  • Texte 1
  • Texte 2

HTM_EDITOR_012.gif

Décalage droit

Texte

HTM_EDITOR_013.gif

Annulation d'une action décalage droit 

 Texte

HTM_EDITOR_014.gif

Création d'un lien hypertexte

 Texte

HTM_EDITOR_015.gif

Image

 HTM_EDITOR_015.gif

HTM_EDITOR_016.gif

Bouton

HTM_EDITOR_017.gif

Tableau

Texte 1

Texte 2

Texte 3

Texte 4

HTM_EDITOR_018.gif

Nettoyage sélectif du HTML

 

HTM_EDITOR_019.gif

Affichage et modification de la source HTML

 
 HTM_EDITOR_020.gif

Alerte indiquant un problème dans le html. Permet de visualiser et de modifier le code html produit.

  

Boutons boîte de dialogue

HTM_EDITOR_021.gif  

Enregistrer 

HTM_EDITOR_022.gif

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

Positionner le curseur à l'endroit de l'insertion de l'image puis appuyer sur l'icône image. Dans la boite de dialogue saisir l'URL localisant l'image (elle doit être relative à la page en cours de rédaction) . Valider.

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:

  HTM_EDITOR_023.gif

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

Modification

Sélectionner l'image puis appuyer sur l'icône image ou double-cliquer sur l'image, La boite de dialogue apparaît avec la valeur du lien. Modifier le lien et valider.
Une image est accessible en modification uniquement lorsque la partie supérieure du cadre symbolisant la présence d'une image est entièrement visible dans l'éditeur. 

Suppression

Sélectionner l'image et appuyer sur la touche "Delete" ou Ctrl/X.

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

Texte 1

Texte 2

Texte 3

Texte 4

Tableau avec en-tête

Texte 1

Texte 2

Texte 3

Texte 4

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

<P>

Paragraphe

<UL>

Début de liste

<LI>

Ligne de liste

<TABLE>

Tableau

<TR>

Ligne de tableau

<TD>

Cellule de tableau

<IMG>

Image

<A>

Lien hypertexte

<H4>

Titre

<H5>

Sous-titre

<STRONG>

Gras

<EM>

Souligné

<DIV>

Conteneur

<TBODY>

Conteneur de ligne de tableau

 <BR>

Ligne suivante d'un paragraphe

<CODE>

Paragraphe de type code source

 

 

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 HTM_EDITOR_021.gif).

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.