Rédaction du contenu en mode WYSIWYG (ckeditor)

Comme pour un traitement de texte classique, il est possible de naviguer dans l'historique des modifications pour annuler une action qui vient d'être effectuée ou rétablir une action qui vient d'être annulée. Les deux flèches permettent cette navigation.

Remarque : les raccourcis clavier ctrl+z (annuler) et ctrl+y (rétablir) sont également pris en charge.

Ces outils, similaires à ceux d'un traitement de texte, permettent de réaliser une mise en forme basique du texte. Pour les utiliser, classiquement, il faut sélectionner du texte puis actionner le bouton pour appliquer le format au texte sélectionné. Les outils sont :

• Gras : met le texte en gras
• Italique : met le texte en italique
• Barré : barre le texte
• Indice : met le texte en indice
• Exposant : met le texte en exposant
• Supprimer la mise en forme : supprime toute mise en forme précédemment effectuée sur le texte sélectionné. Cet outil est très pratique pour "assainir" le balisage HTML, n'hésitez pas à l'utiliser. Lors d'une modification de mise en forme, il est souvent plus facile de supprimer les mises en forme pour repartir d'une base saine que "d'empiler" des mises en forme.

Remarque : il n'existe pas d'outil "souligné". Le soulignement, par convention, est réservé aux liens, il n'est donc pas recommandé de souligner un texte qui ne comporte pas de lien.

• Pour créer un lien (ou modifier un lien existant) sur un élément (texte, image), sélectionnez l'élément souhaité puis cliquez sur le bouton Lien. Une fenêtre s'ouvre permettant de paramétrer le lien (cf ci-aprés)
• Pour supprimer un lien précédemment créé sur un élément (texte, image), sélectionnez l'élément souhaité puis cliquez sur le bouton Supprimer le lien.

Fenêtre de gestion d'un lien

Le champ URL

Il permet de saisir l'URL vers laquelle pointe le lien. Il existe 2 façons de saisir cette URL :

• Fournir l'URL telle quelle.
  • Pour une URL externe, saisissez l'URL en entier, avec le HTTPS://
  • Pour une URL interne, saisissez l'URL relative à la racine, avec le "/" initial. Attention, pour tout lien vers un contenu du site (page, actualité, ...) vous devez préférer la deuxième méthode "Choisir un contenu du site" (cf ci-dessous)
• Choisir un contenu du site : pour établir un lien vers un contenu du site, commencez à taper un ou plusieurs mots du contenu de ce site, Drupal vous propose alors de sélectionner par mi les contenus correspondant. Cliquez sur le contenu pour le sélectionner.

Remarque : Pour établir un lien vers un contenu du site, préférez toujours la méthode "Choisir un contenu du site". En effet, celle-ci fait référence à l'identifiant interne du contenu en question et permet d'établir un lien vers ce contenu en utilisant son alias d'URL, y compris si cet alias est modifié entre temps. ceci évite donc de générer des liens cassés lorsque l'on modifie le titre d'une page (et donc son alias d'URL), par exemple.

Le champ titre

Il permet de saisir un texte affiché en attribut title de la balise <a> du lien.

Ceci n'est pas obligatoire mais vivement conseillé, notamment pour les questions d'accessibilité

Paramètres avancés

Cliquez sur "Avancé" pour plier/déplier les paramètres avancés :

• Classe CSS : permet d'ajouter une classe CSS à la balise <a>. Permet de réaliser des mises en forme spécifiques :
  • Indiquez "fichier" pour insérer un icône de téléchargement de fichier
    
  • Indiquez "pdf" pour insérer un icône de téléchargement d'un fichier PDF
    
• Identifiant (ID) : permet de renseigner l'attribut id de la balise <a>. Permet notamment de créer des liens depuis un autre contenu directement vers cette partie de la page grâce au fragment d'URL (#fragment)
• Ouvrir dans un nouvel[...] : permet de renseigner l'attribut target. Pour ouvrir le lien dans une nouvelle fenêtre, cochez la case. Pour répondre à une exigence de sécurité, le champ Relation (rel) est automatiquement renseigné à noopener. Ne pas modifier la valeur de Relation (rel). Si cette case est cochée, un icône indiquant l'ouverture dans une nouvelle fenêtre est visible :
  
• Relation (rel) : Permet de renseigner l'attribut rel (relation entre la page courante et le contenu lié). Utilisé notamment pour les liens target="_blank" (cf ci-dessus).

Remarque : pour ouvrir la fenêtre de modification d'un lien existant,, au lieu de sélectionner le texte et de cliquer sur le bouton "Lien", vous pouvez simplement double-cliquer sur le lien à modifier.

Fonctionnalité similaire à celle d'un traitement de texte

• Pour créer/supprimer une liste à puces (<ul>) ou numérotée (<ol>), cliquez sur le bouton correspondant.
• Pour agir sur le niveau hiérarchique d'une liste, utilisez les boutons Augmenter / Diminuer le retrait
  • Augmenter le retrait permet de transformer un item de liste en sous-item de liste (niveau hiérarchique N -> N+1)
  • Diminuer le retrait permet de transformer un item de sous-liste en item de liste (niveau hiérarchique N+1 -> N)

L'outil "Citation" met en oeuvre le balise <blockquote>.

Utilisez cet outil pour mettre en valeur des paragraphes entiers, par exemple citer quelqu'un ou faire une remarque.

Exemple :

• Pour insérer une image, positionnez votre curseur là où vous voulez l'insérer puis cliquez sur le bouton correspondant.
• Pour modifier une image préalablement insérée, sélectionnez l'image puis cliquez sur le bouton ou bien double-cliquez directement sur l'image à modifier
• Pour supprimer une image sélectionnez l'image, puis supprimez-la pour les manipulations habituelles (touche suppr, etc...)

Fenêtre de gestion des images

• Le champ Image permet de téléverser une image sur le serveur hébergeant le site. Vous pouvez cliquer sur le bouton parcourir puis parcourir votre ordinateur ou bien glisser-déposer le fichier image directement depuis votre système de fichier vers le champ Image. Lorsqu'une image a été téléversée, un bouton "Supprimer" apparaît, permettant de supprimer le fichier téléversé.
• Le champ Texte alternatif permet de renseigner un texte qui s'affiche en cas d'impossibilité de charger l'image. Ce champ est obligatoire pour l'accessibilité.
• Le champ Aligner permet de définir un alignement du texte par rapport à l'image :
  • Aucun : l'image est affichée comme s'il s'agissait de texte, sur la même ligne que le texte en respectant les alignements de texte
  • Centre : l'image est centrée
  • Gauche / Droite : l'image est flottante à gauche (droite). Le texte vient remplir l'espace laissé à droite (gauche).
• Le champ Légende permet de réserver un espace permettant de saisir une légende en-dessous de l'image. Ce positionnement est effectué au moyen des balises <figure> et <figcaption>
• Le champ Style d'image adaptatif permet de d'indiquer la largeur maximale que peut prendre l'image, tout en respectant les contraintes d'un affichage adaptatif. L'image se rétrécit en fonction de la taille de son conteneur et s'agrandit jusqu'à la taille indiquée, par exemple :
  • larg.max = 500px : l'image s'agrandit jusqu'à 500 pixels de largeur
  • larg.max = 50% de la fenêtre : l'image s'agrandit jusqu'à la moitié de la taille de la fenêtre navigateur

Les différents modes d'affichages permettent de paramétrer l'éditeur de texte de façon à rendre plus aisée la rédaction :

• Le bouton Source permet de basculer entre code HTML source et rendu WYSIWYG du contenu que l'on est en train de rédiger. Ne pas confondre avec le format de texte "HTML non filtré", ici le HTML est toujours filtré, vous pouvez saisir du code HTML, mais celui-ci sera filtré, selon les même règles qu'en mode WYSIWYG, lors de l'enregistrement du contenu ou du retour au mode WYSIWYG :

• Le bouton Afficher les blocs permet d'afficher, dans le rendu WYSIWYG les balises HTML de type bloc sous forme de boîte, permettant de visualiser facilement la structure hiérarchique du contenu. Vivement conseillé pour des structures complexes :

• Le bouton Agrandir / Réduire permet de basculer entre l'affichage classique et l'affichage du champ WYSIWYG en pleine page. Conseillé si vous rédigez un contenu relativement long. Si vous avez basculé en mode pleine page, il faut revenir en mode affichage normal pour enregistrer le contenu

Le menu déroulant "Styles" permet d'appliquer un style à une portion de texte préalablement sélectionnée.

Ces styles sont un moyen simple d'obtenir des mises en formes préréglées dédiées au site internet. Les styles suivants sont disponibles:

• Styles de blocs :
  • Normal : c'est le style par défaut. Un texte contenu dans une balise <p>
  • Titre 2, 3, 4 : ce sont les styles de titre (balises <h2>, <h3> et <h4>). Veillez à avoir une structure hiérarchique des titres cohérentes, c'est important pour le référencement et pour l'accessibilité. <h1> n'est pas disponible puisque c'est la balise utilisée pour le titre de la page.
  • Conteneur responsive : ce style génère une balise <div> à largeur maximale, dont le contenu qui dépasse pourra être visualisé au moyen d'un ascenseur horizontal. Permet de ne pas casser la mise en page par du contenu dont le largeur ne peut être réduite. Notamment utile pour les tableaux avec un nombre important de colonnes.
  • Largeur max 200(500, 1000)px : ce style génère un conteneur (balise <div>) dont la largeur maximale est bloquée à 200(500, 1000) pixels
  • Section de code : délimite une section de code qui sera affichée sur un fond particulier, avec une police de caractères particulière (à chasse fixe). 
• Styles de texte :
  • Code : permet d'utiliser une police à chasse fixe pour afficher une portion de code au milieu d'un texte normal
  • Code (numéro de ligne) (à utiliser avec Section de code) : chaque portion de code d'une section de code mis au style Code (numéro de ligne) affichera un numéro en début de ligne, (numéro incrémenté dans la section de code)

Comme dans n'importe quel traitement de texte, il est possible d'aligner le texte à gauche (par défaut), à droite ou centré.

Remarque : l'alignement justifié n'est pas disponible notamment parce que celui-ci n'est pas conforme aux standards d'accessibilité.

Il est possible de copier-couper-coller du texte dans le champ WYSIWYG.

Trois boutons sont disponibles pour coller :

• coller tel quel
• coller uniquement le texte (sans aucune mise en forme)
• coller depuis Word : permet de coller du texte depuis le traitement de texte Word tout en nettoyant les balise inapropriées

Remarques :

• Il est fortement déconseillé de coller autre chose que du texte (des images, notamment). Pour insérer une image, utilisez le bouton "Image"
• Selon le contexte (votre navigateur, notamment), il vous sera peut-être demandé d'utiliser les raccourcis clavier plutôt que les boutons pour coller :

Le bouton Ligne horizontale permet d'insérer une ligne séparatrice horizontale (balise <hr>)

Le bouton Insérer un caractère spécial ouvre une fenêtre permettant de sélectionner un caractère spécial à insérer :

Il est possible d'insérer des tableaux grâce au bouton Insérer un tableau

Cliquez sur le bouton, la fenêtre "Propriétés du tableau" s'ouvre :

Pour insérer un tableau :

• Entrez le nombre de lignes et de colonnes souhaitées
• La liste déroulante En-têtes permet d'indiquer si vous souhaitez que le première ligne et/ou la première colonne du tableau soient traitées comme des en-têtes (donc affichées différemment)
• Le champ Titre du tableau permet d'entrer un titre au tableau (balise <caption>)

Une fois le tableau inséré, le menu contextuel (clic-droit sur le tableau) permet de modifier diverses propriétés du tableau :

Il est possible de :

• Modifier les propriétés de tableau dans le fenêtre "Propriétés du tableau"
• Insérer des lignes, des colonnes
• Fusionner / Scinder des cellules

Remarque :

un tableau n'est pas un élément adaptatif. Les tableaux de largeur importante peuvent mettre à mal la mise en page du site en imposant une largeur non voulue à la page (et donc un ascenseur horizontal). Il est vivement conseillé d'encapsuler les tableaux dans un bloc de style "Conteneur responsive" qui permet de répondre à cette problématique (cf ci-dessus, paragraphes Styles).