Utiliser l’éditeur WYSIWYG

L’image suivante illustre tous les boutons dont disposent les contributeurs qui travaillent avec l’outil d’édition WYSIWYG (« What You See Is What You Get »).

La barre d'outils complète de l'éditeur de texte

Chacun des boutons figurant dans la barre d’outils WYSIWYG est décrit ci‑dessous.

1 : Annuler et refaire

undo and redo

Les boutons « Annuler » et « Refaire » ont la même fonction que dans n’importe quel programme de traitement de texte. Dans le même esprit, les raccourcis CTRL+Z et CTRL+Y peuvent respectivement servir à annuler et à rétablir une action.

2 : Alignement de texte

text align options

Le bouton d’alignement de texte sert à aligner votre texte en largeur sur la page. Les options disponibles comprennent les suivantes : « Aligner à gauche », « Centrer », « Aligner à droit » et « Justifier ». Pour les utiliser, il suffit de cliquer à n’importe quel endroit dans le bloc de paragraphe que vous souhaitez aligner, puis de cliquer sur le bouton voulu.

3 : Gras, italique, soulignement

bold and underline

Ces boutons servent à mettre en gras, à mettre en italique et à souligner du texte, respectivement. Ils fonctionnent de la même façon que dans un programme de traitement de texte. Pour les utiliser, vous n’avez qu’à mettre en évidence le texte que vous souhaitez modifier, puis qu’à cliquer sur le bouton voulu.

 

4 : Exposant et indice

superscript and subscript

Ces boutons convertiront du texte normal en format exposant et indice, respectivement. Pour les utiliser, mettez en évidence le texte que vous souhaitez modifier, puis cliquez sur le bouton voulu.

5 : Espaces insécables

non breaking space buttons

L'espace insécable et l'espace insécable fine sont des caractères d'espacement qui gardent deux segments adjacents ensemble sur la même ligne.

Les espaces insécables en français

En français, l'espace insécable régulière est requise sur le plan typographique dans les cas suivants, entre autres :

  • Avant le deux-points (:), le guillemet français fermant (») et le tiret (–).
  • Après le guillemet français ouvrant («) et le tiret (–).
  • Entre les chiffres et les abréviations ou les symboles, comme « 100 km ».
  • Entre, avant ou après des abréviations, comme « p. ex. » ou « M. Untel ».
  • Dans les éléments de dates et d'heures, comme  « 25 janvier 2016 » ou « 10 h 15 ».
  • Dans les noms, comme « de Gaulle ».

L'espace insécable fine est recommandée avant le deux-points (;), le point d'exclamation (!) et le point d'interrogation (?). En raison de limitations de logiciels, elle est normalement omise à l'écrit au Canada, alors qu'elle est substituée par l'espace insécable régulière en Europe.

Les espaces insécables en anglais

En anglais, l'espace insécable régulière est souvent conseillée dans les cas suivants :

  • Entre les chiffres et les abréviations ou les symboles, comme « 100 km ».
  • Entre les chiffres de date et le nom de mois, comme « January 25 ».
  • Dans tout autre cas où un saut de ligne pourrait faire obstacle à la lecture, comme dans « World War II ».

6 : Caractères spéciaux

Special Characters

Ce bouton contient une sélection de caractères spéciaux difficiles à saisir sur un clavier. Pour l’utiliser, placez votre curseur à l’endroit vous souhaitez voir apparaître le caractère spécial, puis cliquez sur le bouton. Il apparaîtra alors une fenêtre à partir de laquelle vous pourrez choisir le caractère souhaité.

7. Liste

creating list buttons

Les boutons de liste vous permettent d’insérer des listes ordonnées (alphanumériques), et non ordonnées (avec puces) respectivement. Pour les utiliser, placez votre curseur à l’endroit voulu et appuyez sur le bouton approprié. Cela commencera votre liste. Appuyer sur la touche « Entrée » ajoutera un nouvel article à la liste. Sur tout article de liste, vous pouvez utiliser les raccourcis « Tab » et « Maj+Tab » pour mettre en retrait positif ou négatif l’article de liste sélectionné, et ainsi créer ou enlever un élément enfant de l’article de liste qui lui est hiérarchiquement supérieur.

8 : Hyperlien

Link button options

Les boutons Lien, Supprimer le lien et Anchre s'utilisent comme suit. Certaines parties de cette section sont tirées de la documentation de CKSource (8 August 2012)

Bouton Lien

Le bouton d’hyperlien sert à convertir tout texte ordinaire en un hyperlien sur lequel l’utilisateur peut cliquer pour passer à une autre page. Pour l’utiliser, mettez en évidence le texte que vous souhaitez convertir en lien, puis cliquez sur le bouton, ce qui fera apparaître une fenêtre contextuelle avec les champs supplémentaires suivants :

 

Adding links pop up window with options

Dans l'onglet Informations sur le lien :

  • Type de lien : Ce menu déroulant vous permet de choisir parmi les trois options :
    1. URL : Choisissez cette option si vous voulez ajouter un lien vers une autre page. Une fois sélectionnée, les champs suivants s'afficheront.
      1. Protocole : Ce menu déroulant donne les options suivantes : http://, https://, ftp://, news:// ou <autre>. Si vous collez un lien dans le champ URL, l'éditeur sélectionnera le protocole qui convient de façon automatique.
      2. URL :C’est la destination du lien. Pour tout lien qui ne relève pas directement de votre site Web, utilisez l’adresse URL complète (p. ex. http://www.siteweb.ca). Si vous créez un lien menant à une autre page qui relève directement de votre site Web, utilisez l’adresse URL relative (/mapage). Cela permettra d'éviter toute erreur de lien si jamais l'URL du site change.
    2. Ancre dans cette page : Choisissez cette option si vous souhaitez créer un lien menant vers une ancre dans la page.
    3. Courriel : Sélectionnez cette option pour créer un lien menant vers une adresse de courriel.

Onglet Destination

  • Cible : Détermine si le lien ouvrira dans la même fenêtre ou dans une nouvelle fenêtre. Pour des raisons d’accessibilité, on ne devrait jamais faire ouvrir un lien dans une nouvelle fenêtre. Si vous devez quand même le faire, indiquez dans le texte du lien que le lien s’ouvre dans une nouvelle fenêtre (p. ex. « Lien (nouvelle fenêtre) »).

Onglet Avancé : Cet onglet donne d'autres options qui ne sont pas nécessaires, mais qui pourraient quand même être utiles dans certains cas. 

  • ID : Un identifiant unique qui est associé au lien (attribut id). 
  • Sens d'écriture : La direction dans laquelle un texte est écrit (attribut dir).
  • Touche d'accessibilité : Un raccourci clavier pour accéder au lien (attribut accesskey).
  • Nom : Obsolète. Un nom d'ancre (attribut name).
  • Code de langue : La langue du document lié; le code doit correspondre au format RFC 1766 (attribut lang).
  • Ordre de tabulation : Un chiffre qui détermine l'ordre dans laquelle un utilisateur accédera au lien s'il utilise la touche de tabulation (attribut tabindex).
  • Description : Le texte de l'infobulle qui s'affiche lorsqu'un utilisateur passe son curseur sur le lien (attribut title).
  • Type de contenu : Le type de contenu du lien (attribut type).
  • Classes CSS : La ou les classes CSS du lien (attribut class), séparés par une espace.
  • Encodage de la cible : L'encodage du document lié (attribut charset).
  • Relation : La relation entre le présent document et le document lié (attribut rel).
  • Style : CSS style definitions (attribut style). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

Bouton Supprimer le lien

After a link has been created, you can always remove the link by placing your cursor anywhere within the link text and pressing the Unlink button. 

Bouton Ancre

To create an anchor, press the anchor button, the anchor properties window will appear, enter a name in the Anchor Name Text box to create an Anchor. 

9 : Ajouter une image

add an image

Le bouton Image insère une image dans le WYSIWYG. Pour l’utiliser, placez votre curseur à l’endroit souhaité et cliquez sur le bouton Image, ce qui fera apparaître une fenêtre offrant trois options :

        Transférer : Vous permet de téléverser une nouvelle image. Pour le faire, cliquez sur le bouton « Choisir un fichier ». Cela ouvrira un navigateur où vous pourrez choisir tout fichier de votre ordinateur. Après avoir sélectionné un fichier, cliquez sur « Suivant ». À ce stade, vous devez inscrire un texte de remplacement pour l’image (à des fins d’accessibilité); cependant, vous ne devez pas paramétrer le texte Titre. Si l’image est complexe, fournissez dans le champ de description longue un lien menant à une page qui décrit l’image en détail. Ensuite, cliquez sur « Enregistrer ». Vous verrez alors les options que vous avez sélectionnées jusqu’à maintenant. Vous n’avez plus qu’à cliquer sur « Soumettre ». Vous devriez maintenant voir votre nouvelle image à l’intérieur du WYSIWYG.

        Bibliothèque : Vous pouvez ici choisir toute image ayant déjà été téléversée sur le site Web. Après avoir cliqué sur l’image souhaitée, cliquez sur « Soumettre », ce qui fera apparaître toutes les options par défaut associées à l’image. Vous pouvez alors écraser le texte de remplacement et le texte du titre, si ce qui est indiqué ne suffit pas. Après avoir effectué les éventuels changements, cliquez sur le bouton « Submit ». Vous devriez maintenant voir l’image dans votre WYSIWYG.

        Mes fichiers : Cette section fonctionne exactement de la même façon que Bibliothèque, à la différence que votre choix d’images est limité aux images que vous avez personnellement téléversées.

Link to new page on step by step process to add images to the text editor

10 : Bâtir un tableau

Bouton dans la barre d'outils permettant de créer des tableaux de données

La bouton Tableau sert à créer des tableaux de données tabulaires. Cliquer sur ce bouton ouvrira la fenêtre Propriétés du tableau, qui comprendra deux onglets :

  • Propriétés du tableau;
  • Avancé (ces options ne sont pas utilisées).

Voici un résumé des champs disponibles dans la section Propriétés du tableau :

  • Lignes (obligatoire– Le nombre de rangées que contiendra le tableau.
  • Colonnes (obligatoire– Le nombre de colonnes que contiendra le tableau.
  • En-têtes (obligatoire– Pour des raisons d'accessibilité, il importe de préciser les en-têtes dans un tableau. Cette option vous permet de définir si la première rangée, la première colone ou les deux seront définies comme en-têtes.
  • Titre – Le titre qui figurera au-dessus du tableau.
  • Résumé – Un résumé de la structure du contenu du tableau qui sera exposé aux dispositifs d'aide comme les lecteurs d'écran. On recommande de bien décrire vos tableaux dans un langage clair et simple afin de les rendre plus accessibles aux utilisateurs handicapés.
  • Évitez d'utiliser les autres options, puisqu'ils traitent du style du tableau. Ces paramètres seront filtrés au moment d'enregistrer la page afin d'assurer que les styles respectent les normes de l'Université et n'entrent pas en conflit avec celles-ci.       

11 : Gabarits

adding a template to the text editor

Le bouton des gabarits sert à ajouter au WYSIWYG des gabarits prédéfinis. À titre d'exemple, il existe un gabarit pour ajouter une section à deux colonnes dans le corps du texte.

Pour ajouter un gabarit, placez votre curseur à l’endroit souhaité, puis cliquez sur le bouton des gabarits, ce qui fera apparaître une liste déroulante et une fenêtre d’aperçu. Une fois qu’un gabarit est sélectionné dans la liste, la fenêtre d’aperçu s’actualisera. Si le gabarit que vous avez choisi répond à vos besoins, cliquez sur son nom pour l'insérer dans votre texte. Ensuite, vous pouvez insérer votre contenu à la place du contenu par défaut.

12 : Ligne horizontale

Adding a horizontal line, button

Le bouton de ligne horizontale ajoute un séparateur à votre contenu. Pour l’utiliser, placez votre curseur à l’endroit où vous souhaitez insérer le séparateur, puis cliquez sur le bouton. Vous remarquerez que si jamais vous choisissez un endroit situé au milieu d’un paragraphe, le fait de cliquer sur ce bouton forcera la division du paragraphe en deux paragraphes distincts.

13 : En-têtes et paragraphes

Adding semantic headings using paragraph format button

Le menu déroulant Paragraph sert à offrir une signification sémantique à quiconque lit le texte. C’est ce que vous utiliserez pour définir tous vos en‑têtes. Dans la définition des en‑têtes, il importe de souligner qu’il faut utiliser une hiérarchie parent-enfant. Ainsi, un « En‑tête 3 » ne peut contenir un autre « En‑tête 3 » ou un en-tête de niveau plus élevé. Vous pourriez toutefois utiliser un deuxième « En‑tête 3 » pour marquer le début d’une nouvelle section au même niveau que la première. Voici la hiérarchie des en‑têtes (du niveau le plus élevé au plus bas niveau) :

  1. En-tête 1 : À noter qu’il ne peut y avoir qu’un seul « En-tête 1 » sur une page (habituellement la page titre). Pour cette raison, vous ne devez jamais l’utiliser à l’intérieur du WYSIWYG.
  2. En-tête 2
  3. En-tête 3
  4. En-tête 4
  5. En-tête 5
  6. En-tête 6

Voici un exemple qui aide à clarifier comment fonctionne la hiérarchie des en‑têtes.

        En-tête 1 : Menu Starbucks (ma page titre)

        En-tête 3 : Boissons (un titre de section)

        En-tête 4 : Boissons espresso

        En-tête 4 : Café filtre

        En-tête 4 : Boissons chocolatées

        En-tête 3 : Aliments (un titre de section)

        En-tête 6 : Petit déjeuner

        En-tête 6 : Pâtisseries

Comme on peut le voir ci‑dessus, l’« En-tête 1 » est réservé à ma page titre. Ensuite, on peut utiliser n’importe lequel des en‑têtes restants pour le prochain niveau. Dans cet exemple, nous utilisons « En-tête 3 ». Nous aurions aussi bien pu utiliser « En-tête 2 » jusqu’à « En-tête 5 », puisqu’il n’y a qu’un seul autre niveau sous ces niveaux. Sous les deux « En-tête 3 », on peut tout aussi bien utiliser « En-tête 4 », « En-tête 5 » ou « En-tête 6 ».

14 : Styles

styles

Le menu déroulant des styles sert à ajouter des classes à certains éléments. Vous pourrez ainsi modifier l’aspect visuel des articles du WYSIWYG. Pour l’utiliser, placez votre curseur sur le texte auquel vous souhaitez appliquer une classe, puis sélectionnez la classe voulue dans le menu déroulant. À noter que certaines classes sont propres à un élément (p. ex., certaines choses ne peuvent être appliquées qu’aux en‑têtes).

15 : Coller

Pasting options

Les boutons Coller, Coller comme texte et Coller de Word servent à coller du contenu et à le reformater, au besoin. Pour les utiliser, placez votre curseur à l’endroit où vous souhaitez insérer le contenu, puis cliquez sur le bouton voulu. Après avoir collé votre contenu dans la fenêtre, cliquez sur « OK ». Le contenu devrait alors apparaître dans la fenêtre du WYSIWYG.

16 : Afficher en plein écran l’outil WYSIWYG

Button to make the text editor full screen

Ce bouton fait afficher en plein écran l’outil WYSIWYG.

17 : Représentation visuelle

Button to visually represent block items

Ce bouton offre une représentation visuelle des éléments contenus dans le WYSIWYG. Cela peut être très utile si l’on tente d’ajouter des classes de style à certains éléments.

18 : Correcteur orthographique

Options du correcteur orthographique intégré

Le correcteur orthographique vérifiera l'orthographe des mots en fonction d'un dictionnaire anglais canadien et d'un dictionnaire français canadien. Cliquer sur le bouton du correcteur donnera les options suivantes :

  • Disable SCAYT (Désactiver le correcteur) : Sélectionner cette option désactivera la vérification orthographique.
  • Options : La boîte de dialogue Options permet d'ignorer certains types de mots, comme les mots qui ne contiennent que des lettres majuscules.
  • Languages (Langues) : Cette option permet de changer le dictionnaire utilisé pour la vérification orthographique. À titre d'exemple, vous pourriez passer du dictionnaire « français canadien » au dictionnaire « français de France » ou « espagnol », selon le cas.
  • Dictionaries (Dictionnaires): Cette option permet de créer ou de récupérer un dictionnaire personnel. Par défaut, le dictionnaire est stocké dans le navigateur sous forme de cookie.
  • About SCAYT (Au sujet du correcteur) : Cette option ouvrira une boîte de dialogue qui fournira des détails sur l'outil de correction orthographique.
  • Check Spelling (Orthographe) : Cette option ouvrira une boîte de dialogue qui fournira des fonctions de correction orthographique plus avancées.

19 : Vérification de l'accessibilité

Bouton de vérification de l'accessibilité

Le bouton « Vérifier l'accessibilité » se trouve à la fin de la barre d'outils de l'éditeur de texte. Il suffit de cliquer dessus pour activer le vérificateur. Si des problèmes sont décelés, l'outil les mettra en surbrillance et affichera une fenêtre contextuelle contenant de l'information sur les problèmes détectés. Pour certains types de problèmes, il peut également fournir la possibilité de les corriger de façon automatique.

20: Source

Le bouton Source vous permet d'afficher le code HTML de votre contenu. Il vous permet d'apporter des modifications au code HTML pour ajuster votre contenu. En bref, cela signifie que vous pouvez écrire votre contenu en utilisant l'éditeur WYSIWG, en utilisant du HTML brut, ou une combinaison des deux. Vous pouvez basculer entre le code HTML et votre contenu dans l’éditeur WYSIWYG à tout moment en appuyant sur le bouton Source.

Les fonctionnalités suivantes sont disponibles dans l'éditeur de code HTML (source):

  • Coloration syntaxique: les balises et les attributs sont colorés pour les distinguer facilement
  • Indentation automatique: lors de l'écriture de code HTML, l'indentation des balises est effectué automatiquement
  • Auto complétion: lors du retour à l'éditeur WYSIWYG, l’éditeur ferme automatiquement toutes les balises accidentellement laissées ouvertes
  • La fonction d’expression régulière pour rechercher et remplacer: vous permet d'effectuer une recherche basée sur une expression régulière et de la remplacer en cliquant sur le :
    • Bouton de recherche: pour la recherche
    • Bouton de remplacement: Pour rechercher et remplacer

Tout cela est possible en restant dans l'éditeur HTML

Aide

 

21: Utilisation du plugin ckeditor oembed

Ce document propose un bref didacticiel sur l'utilisation du plug-in oembed_ckeditor pour intégrer des vidéos YouTube accessibles. Ce tutoriel assume que le lecteur est déjà familier avec ckeditor ou d'autres éditeurs WYSIWYG.

Ce plugin permet aux créateurs de contenu d'intégrer une vidéo YouTube avec des fonctionnalités d'accessibilité. Ces fonctionnalités sont plus précisément, la possibilité d’ajouter des icônes indiquant s’il y a des sous-titres et/ou une description audio accompagné d’un lien pour la description audio.

Ci-dessous une capture d'écran d'une vidéo intégrée avec les options d’accessibilité:

 

 

Utilisation du plugin

Pour utiliser le plugin, cliquez sur l'icône YouTube présente dans la barre d'outils de l'éditeur.

 

 

Boîte de dialogue du Plugin

Après sélection de l’icône, une boite de dialogue intitulée "YouTube Media Dialogue" doit apparaitre. Voir la capture d'écran ci-dessous pour référence. Utilisez l'onglet "Configurer" pour configurer et ajouter une vidéo YouTube accessible. L'onglet "Aide" fournit une brève description des champs et des options de l'onglet ”Configurer”.

Le dernier onglet intitulé "Liens utiles" fournit quelques ressources utiles pour créer des descriptions audio et ajouter des sous-titres aux vidéos YouTube.

 

Ajouter une vidéo

Pour ajouter une vidéo, dans l'onglet ”Configurer”, saisir ou coller l'URL de la vidéo dans le champ de texte "URL YouTube". Ce champ ne peut pas être vide, et l'URL doit être au format "http://..." ou "https://... " (par exemple https://www.youtube.com/watch?v=4eTgTKKHU7Y ).

Les champs restants peuvent être laissés vides. Ils permettent d'intégrer la vidéo sur la page avec les indicateurs d'accessibilité.

Si nécessaire remplir les champs supplémentaires (voir aide ci-dessous), puis cliquez sur "OK" pour intégrer la vidéo.

 

 

Options d'accessibilité

Sous-titrage

La case à cocher ci-dessous est utilisée pour afficher ou masquer l'indicateur de de sous-titres (icône).

Si coché: l'icône CC est affichée.

Si décoché: icône CC n’est pas affichée.

 

Description audio

Le deuxième champ texte, intitulé "URL de description audio" est utilisé pour ajouter l'icône et le lien indiquant qu’une description audio est disponible. Contrairement au champ URL de la vidéo, ce champ n’est pas obligatoire et il peut rester vide. Cependant, il nécessite le même format que l’URL de la vidéo (“http://...” ou “https://...”).

Si le champ de l’URL de description audio est vide ou si une URL non valide est fournie, l’icône de description audio (AD) et le lien ne seront pas affiché, cependant la vidéo sera intégrée normalement.

 

 

Options de formatage

Type d’affichage

Cette option permet de redimensionner la vidéo.

Le menu de redimensionnement propose trois options:

Remarque: ces options concernent uniquement le redimensionnement initial. Ensuite le redimensionnement est automatique en fonction du redimensionnement de la fenêtre.

  • Aucun redimensionnement (par défaut),
  • Redimensionnement responsive
  • Redimensionnement spécifique.

 

  • Aucun redimensionnement (par défaut): cette option conserve les dimensions basées sur le ratio d'aspect sélectionné (16:9 -> 560x315, 4:3 -> 420x315).
  • Redimensionnement responsive: cette option étire ou réduit l'image vidéo à des dimensions spécifiques tout en conservant le format d'origine. Comme indiqué ci-dessous, le choix de cette option affichera les champs largeur maximale et hauteur maximale. La vidéo s’agrandit ou se réduit pour s'adapter aux dimensions maximales tout en conservant le bon ratio d’affichage.
  • Redimensionnement spécifique: cette option permet de redimensionner l'image vidéo librement, en ignorant le format d'origine. Cette option permet d'entrer les valeurs exactes de largeur et de hauteur désirées.

 

Alignement

Similaire à l'alignement de texte sur une page. Cette option fournit quatre options d'alignement: aucune, gauche, centre et droite. Par défaut, « aucun » alignera sur la gauche. 

 

 

Modifier une vidéo déjà intégré.

Pour modifier une vidéo existante, double-cliquez sur l'élément dans l'éditeur WYSIWYG. La boîte de dialogue de configuration s’ouvrira et vous pourrez modifier les options.

NOTE : Avec Interne Explorer, la sélection d’un widget n’est pas possible. Pour supprimer une vidéo existante vous devez utiliser le bouton “Supprimer” de la boite de dialogue.

Double-cliquez n'importe où dans zone délimité pour ouvrir la boîte de dialogue.

 

» Envoyer vos commentaires
    État: 
  • Accepté
    Sujets: 
  • Soutien
    Types: 
  • Guide d'usager
Haut de page