Éditeur HTML

Aperçu

L'éditeur HTML intégré permet aux formateurs, aux enseignants et aux administrateurs de créer et de modifier du contenu directement dans les cours, les messages, les widgets, etc.

Cet article vous apprendra comment accéder aux différents éléments de l'éditeur et les utiliser pour créer un contenu attrayant et esthétique.

Veuillez noter que la plateforme commerciale utilise par défaut le terme « cours » et la plateforme académique le terme « classe » . Dans cet article, les termes « cours » et « classe » sont interchangeables.

Le menu de la barre d'outils

L'éditeur HTML s'affiche lors de la modification de contenu dans les cours, les messages, les widgets, etc. La barre d'outils comprend une barre de menu et des icônes permettant de modifier le contenu de la section.

Notez que les captures d'écran de cet article s'affichent dans une section de cours, mais la barre d'outils fonctionne de la même manière dans les cours, les messages et les widgets. L'éditeur de contenu situé à gauche de la barre d'outils est uniquement disponible lors de la modification des cours.

Cours, module, section de page en mode édition avec la barre d'outils mise en évidence

La barre de menu supérieure se compose de sept menus, qui sont décrits plus en détail ci-dessous.

Section Cours, Module, Modifier avec les menus supérieurs de la barre d'outils mis en évidence

Déposer

Le menu Fichier comprend les actions suivantes :

Titre	Description
Nouveau document	Efface la fenêtre de texte de tout texte, image ou lien.
Aperçu	Ouvrez une fenêtre contextuelle pour afficher un aperçu du contenu publié.
Imprimer	Imprimez le contenu de la fenêtre de texte.

Modifier

Le menu Édition comprend les actions suivantes.

Titre	Description
Défaire	Annuler votre dernière action.
Refaire	Répétez votre dernière action.
Couper	Supprimez le texte/l'image sélectionné(e) et enregistrez-le/la dans le presse-papiers.
Copie	Copiez le texte/l'image sélectionné(e) et enregistrez-le/la dans le presse-papiers.
Coller	Coller le texte/l'image depuis le presse-papiers.
Coller comme texte	Coller le contenu du presse-papiers en tant que texte uniquement, sans mise en forme.
Tout sélectionner	Sélectionnez/surlignez tout le contenu de la fenêtre de texte.
Rechercher et remplacer	Trouvez un mot ou une expression et remplacez-le par un nouveau mot ou une nouvelle expression (le cas échéant).

Voir

Le menu Affichage comprend les actions suivantes pour visualiser le texte et les caractères dans la fenêtre de texte.

Titre	Description
Code source	Afficher/modifier le code source dans la fenêtre de texte.
Afficher les caractères invisibles	Affiche les caractères invisibles tels que les espaces et les sauts de ligne.
Afficher les blocs	Affiche les blocs de paragraphes dans la fenêtre de texte.
Aperçu	Ouvrez une fenêtre contextuelle pour afficher un aperçu du contenu publié.

Insérer

Le menu Insertion comprend les actions suivantes pour insérer des images, des vidéos, des tableaux, des liens, et plus encore.

Titre	Description
Lien	Insérer un lien hypertexte vers une URL.
Médias	Insérer/intégrer un élément multimédia.
Tableau	Insérer et créer un tableau.
Caractère spécial	Insérez un caractère spécial.
Émojis	Insérez un emoji.
Ligne horizontale	Insérez une ligne horizontale.
Saut de page	Insérez un saut de page pour commencer une nouvelle page.
Espace non briseur	Insérez un espace qui ne coupe pas la page.
Ancre	Insérer une ancre/un signet à un emplacement précis.
Insérer le modèle	Insérez un modèle enregistré.
Enregistrer comme modèle	Enregistrez le texte surligné comme modèle.
Date/heure	Saisissez les options de date ou d'heure à partir du menu déroulant.
Modifier l'équation	Cliquez pour modifier une équation sélectionnée.
Télécharger une image	Cliquez pour télécharger une image.
Téléverser un fichier	Cliquez ici pour télécharger un fichier.
Créer une visioconférence	Cliquez pour ajouter la visioconférence au texte*.
Enregistrement audio	Cliquez pour enregistrer l'audio directement dans la fenêtre de texte.
Enregistrer la vidéo	Cliquez pour enregistrer une vidéo directement dans la fenêtre de texte.

* Pour que les options de création de webconférence s'affichent, l'application (ou les applications) de webconférence doivent d'abord être installée(s) depuis le centre d'applications.

Format

Le menu Format comprend les actions suivantes pour la mise en forme du texte.

Titre	Description
Audacieux	Mettez en gras le texte sélectionné.
Italique	Mettez le texte sélectionné en italique.
Souligner	Soulignez le texte sélectionné.
barré	Barrer le texte sélectionné.
Exposant	Mettez le texte sélectionné en exposant.
Indice	Mettez en forme le texte sélectionné en indice.
Code	Mettez en forme le texte sélectionné sous forme de code.
Blocs	Insérez la mise en forme de bloc appropriée à partir du menu déroulant.
Polices de caractères	Sélectionnez une autre police dans le menu déroulant.
Tailles de police	Sélectionnez une taille de police dans le menu déroulant.
Aligner	Sélectionnez un style d'alignement de texte dans le menu déroulant.
Hauteur de ligne	Sélectionnez la hauteur de ligne dans le menu déroulant.
Augmenter l'indentation	Indentez le texte ou le paragraphe vers la droite.
Diminuer le retrait	Déplacez le texte ou le paragraphe vers la gauche.
Couleur du texte	Sélectionnez la couleur de texte souhaitée dans le menu déroulant.
Couleur de fond	Sélectionnez une couleur de fond dans le menu déroulant.
Formatage clair	Supprimer la mise en forme du texte sélectionné.

Outils

Le menu Outils comprend les actions suivantes.

Titre	Description
Code source	Afficher/modifier le code source.
Nombre de mots	Consultez le nombre de mots et de caractères.

Tableau

Le menu Tableau comprend les actions suivantes pour insérer un tableau et modifier sa structure.

Titre	Description
Tableau	Insérer un tableau.
Cellule	Options de modification des cellules sélectionnées dans le menu déroulant.
Rangée	Modifiez, supprimez et/ou insérez des options pour la ou les lignes sélectionnées à partir du menu déroulant.
Colonne	Modifiez, supprimez et/ou insérez des options pour la ou les colonnes sélectionnées à partir du menu déroulant.
Propriétés du tableau	Afficher et modifier les propriétés du tableau telles que la largeur, la hauteur, les bordures, etc.
Supprimer le tableau	Supprimer le tableau sélectionné.

Le menu secondaire de la barre d'outils

Sous le menu principal, la barre d'outils comprend des options déroulantes facilement accessibles et des icônes pour une mise en forme supplémentaire.

Cours, Module, Section Modifier avec les icônes du menu secondaire de la barre d'outils mises en évidence

Annuler et rétablir

Cliquez sur l' icône Annuler pour annuler l'action précédente.
Cliquez sur l' icône « Rétablir » pour revenir à l'action précédente.

Styles de paragraphe et de titre

Cliquez sur le menu déroulant « Style de titre » pour appliquer des formats et des styles au texte.

Cours, Module, Section Modifier avec le menu Style de titre actif et mis en surbrillance

Style de police

Cliquez sur le menu déroulant « Police » pour modifier la police de votre texte.

Taille de la police

Cliquez sur le menu déroulant de la taille de la police pour modifier la taille du texte.

Cours, Module, section Modifier avec le menu Taille de police actif et mis en surbrillance

Format de police

Cliquez sur l' icône gras pour mettre le texte en gras.
Cliquez sur l' icône italique pour mettre le texte en italique.
Cliquez sur l' icône de soulignement pour souligner du texte.

Icônes en gras, en italique et soulignées

Couleur du texte

Cliquez sur l'icône de couleur du texte pour choisir/modifier la couleur de la police.

Alignement du texte

Cliquez sur l'icône d'alignement pour aligner le texte.

Cours, Module, Section Modifier avec le menu Alignement actif et mis en surbrillance

Liste à puces

Cliquez sur l'icône de liste à puces pour créer et mettre en forme une liste à puces.

Liste numérotée

Cliquez sur l'icône de liste numérotée pour créer et mettre en forme une liste à puces ou numérotée.

Télécharger une image et un fichier

Cliquez sur l'icône de téléchargement d'image pour télécharger une image.
Cliquez sur l'icône de téléchargement de fichiers pour télécharger des fichiers.

Icônes de téléchargement d'image et de fichier

Formatage clair

Cliquez sur l'icône Effacer la mise en forme pour supprimer les styles qui auraient pu être importés lors du copier-coller de contenu.

Couleur de fond

Cliquez sur l'icône de couleur d'arrière-plan pour ajouter une surbrillance au texte/aux images.

Cours, Module, Section Modifier avec le menu de couleur d'arrière-plan actif et mis en surbrillance

Barre d'outils avancée

Pour des fonctionnalités supplémentaires :

Cliquez sur « Plus » icône permettant d'afficher la barre d'outils avancée.

Cours, Module, Section Modifier avec l'icône Plus mise en évidence

La barre d'outils avancée s'affiche sous la barre d'outils secondaire et comprend des options supplémentaires décrites ci-dessous.

Section Cours, Module, Modifier avec les icônes de la barre d'outils avancée mises en évidence

Retraits et ligne horizontale

Cliquez sur l' icône « Diminuer le retrait » pour réduire le retrait du texte.
Cliquez sur l' icône Augmenter le retrait pour indenter le texte.
Cliquez sur l' icône Ligne horizontale pour insérer une ligne horizontale.

Icônes de réduction du retrait, d'augmentation du retrait et de ligne horizontale

Émojis

Cliquez sur l' emoji icône pour ouvrir le clavier Emoji.
Cliquez sur un emoji pour l'insérer.

Section Cours, Module, Modifier avec l'écran contextuel Emoji

Caractères spéciaux

Cliquez sur le caractère spécial icône permettant d'ouvrir la fenêtre contextuelle Caractères spéciaux.
Cliquez sur un caractère spécial pour l'insérer.

Cours, Module, Section Modifier avec l'écran contextuel de caractère spécial

Icônes avancées

Cliquez sur l' icône Insérer/modifier un lien insérer un lien vers n'importe quelle URL.
Cliquez sur l' icône Insérer/Modifier un média insérer/intégrer un lien vers n'importe quelle URL.
Cliquez sur l' icône Insérer/modifier une équation insérer/intégrer un lien vers n'importe quelle URL.
Cliquez sur l' icône Insérer un modèle insérer un modèle.
Cliquez sur l' icône du code source pour afficher le code source de la page actuelle.
Cliquez sur l' icône d'enregistrement audio enregistrer l'audio directement sur la page du cours.
Cliquez sur l' icône Enregistrer une vidéo enregistrer une vidéo directement sur la page du cours.

Cliquez sur l'icône Créer une conférence Web pour créer un lien de conférence web en utilisant l'une des options du menu déroulant.

Remarque : seules les applications de visioconférence installées sur votre plateforme s'afficheront.

Section Cours, Module, Modifier avec le menu Créer une conférence Web actif et mis en surbrillance

meilleures pratiques

Utilisez ces bonnes pratiques pour tirer le meilleur parti de l'éditeur.

Pour insérer un saut de ligne au lieu d'un nouveau paragraphe, appuyez sur Maj + Entrée.
Lors de l'intégration de widgets HTML, consultez d'abord la fenêtre de texte dans le code source.

Cliquez sur le menu déroulant Afficher .
Cliquez sur < > Code source .

Collez le contenu tiers sous forme de texte brut pour éviter les erreurs de mise en forme.
Pour rendre invisibles les bordures d'un tableau :

Sélectionnez le tableau.
Cliquez sur Propriétés du tableau .
Dans l'onglet Général de la fenêtre contextuelle, définissez la largeur de la bordure sur « 0 ».
Dans l'onglet Avancé , sélectionnez le style de bordure « Masqué » ou « Aucun ».

Cours, Module, section Modifier avec un tableau sélectionné et l'icône Propriétés du tableau mise en évidence

Correcteur orthographique

L'éditeur comprend un correcteur orthographique qui signale les mots mal orthographiés par une ligne rouge. Pour corriger une faute d'orthographe :

Appuyez sur CTRL + Clic droit .
Sélectionnez l'orthographe correcte dans la liste des suggestions.

Cours, Module, Section Modifier avec un menu de correction orthographique actif et mis en évidence

Variables d'intégration

Vous pouvez intégrer des variables dans les pages de leçon en utilisant le format {{nom de la variable}}. Cela vous permet de personnaliser le contenu pour les utilisateurs et les cours.

Les variables suivantes peuvent être utilisées dans la page de contenu :

{{class_custom_field_1}}
{{class_custom_field_2}}
{{class_finish_date}}
{{class_id}}
{{class_location}}
{{class_name}}
{{class_name_with_link}}
{{class_start_date}}
{{completed_at_utc}}
{{course_code}}
{{credits}}
{{days_in_class}}
{{jours_restants}}
{{désactiver_les_étudiants_après}}
{{organization_id}}
{{organization_name}}
{{section_code}}
{{site_name}}
{{site_name_with_url}}
{{teacher_name}}
{{teacher_name_with_link}}
{{user_email}}
{{user_first_name}}
{{user_full_name}}
{{user_full_name_with_link}}
{{ID de l'utilisateur}}
{{user_last_name}}
{{user_prefered_contact_method}}
{{user_ssn}}
{{ID de l'utilisateur}}
{{pourquoi}}

Cours, Module, Section Modifier avec exemples de variables mis en évidence

Vidéos de dimensionnement

Si vous ajoutez une vidéo sous forme de lien dans l'éditeur HTML, vous pouvez définir sa taille à l'aide de ce code HTML :

<a width='100' height='700'>lien</a>.

Si vous souhaitez que la vidéo soit dimensionnée automatiquement, vous pouvez omettre l'une des valeurs (largeur ou hauteur).
Vous pouvez également utiliser des valeurs en pourcentage pour définir la taille d'une vidéo, par exemple, <width='100%' >.

Retouche d'images

L'éditeur propose différentes options pour modifier les images une fois téléchargées. Pour modifier une image :

Cliquez sur l'image.
Un menu d'options apparaît.

Icône	Description
	Faire pivoter l'image dans le sens antihoraire
	Faire pivoter l'image dans le sens horaire
	Inverser l'image horizontalement
	Inverser l'image verticalement
	Recadrer l'image
	Modifier les propriétés de l'image

Cours, Module, Section Modifier avec une image mise en surbrillance et la barre d'outils de modification d'image active

Si vous sélectionnez l'icône Modifier les propriétés de l'image , la fenêtre contextuelle Insérer/Modifier une image s'affiche.

Source : Affiche la source de l'image.
Description alternative : Cette description est lue par les lecteurs d’écran pour aider les utilisateurs malvoyants.
Largeur et hauteur : Ajustez la taille de l'image.

Remarque : Utilisez l’icône de verrouillage pour garantir que l’image conserve son rapport largeur/hauteur.

Lors de l'ajout d'une nouvelle image, vous pouvez également ajouter une description pour les lecteurs d'écran :

Saisissez une description dans le champ Description de l'image .

Fenêtre contextuelle de téléchargement d'image

Modèles de contenu

Les modèles de contenu vous permettent d'enregistrer des fragments de code HTML dans le catalogue de ressources, puis de les insérer facilement dans vos zones de contenu. Vous pouvez ainsi créer une bibliothèque d'éléments de contenu courants que vous utilisez fréquemment.

Pour ajouter un fragment de code HTML dans un modèle de contenu :

Sélectionnez le texte et/ou les images dans l'éditeur HTML.
Clic droit.
Sélectionnez « Enregistrer comme modèle » .

Saisissez un titre pour le modèle.
Cliquez sur OK .
Le modèle de contenu sera enregistré dans votre bibliothèque personnelle.

Pour accéder à vos modèles de contenu enregistrés :

Cliquez sur Ressources dans la barre de navigation de gauche.
Cliquez sur Catalogue dans le menu déroulant.
Filtrer par type de ressource > Modèle de contenu dans le panneau de recherche.
Cliquez sur votre modèle de contenu.

Ressources, page du catalogue avec la section Type de ressource mise en évidence dans le panneau de recherche

Le modèle de contenu s'affiche. Pour plus de détails sur un modèle de contenu :

Cliquez sur Détails .

Ressources, Modèle de contenu (fenêtre contextuelle)

Vous pouvez désormais mettre à jour la section contenu :

Cliquez sur Modifier pour modifier le contenu .
Cliquez sur Supprimer pour retirer le modèle.

Ressources, modèle de contenu avec icônes Modifier et Supprimer mises en évidence

En cliquant sur « Modifier », vous pouvez mettre à jour le contenu et le partager avec d'autres utilisateurs.

Sélectionnez Bibliothèque personnelle , Organisation ou Entreprise si vous souhaitez que le modèle de contenu soit accessible aux autres utilisateurs.
Après avoir modifié le contenu, cliquez sur Enregistrer .

Ressources, écran de modification du modèle de contenu

Pour insérer une copie du modèle de contenu dans une section :

Accédez à la section.
Clic droit.
Sélectionnez Insérer un modèle .
Sélectionnez le modèle dans la liste déroulante.
Cliquez sur Enregistrer .

Comment utiliser l'éditeur HTML