Sommaire[Masquer]

 

Ce tutoriel est pour Joomla! compat 32

Editeur TinyMCE

L'éditeur par défaut pour le site (front-end) et l'administration (bak-end) de Joomla! est l'éditeur TinyMCE.

TinyMCE est un éditeur WYSIWYG (What You See Is What You Get = ce que vous voyez est ce que vous obtenez = tel affichage, tel résultat) qui permet aux utilisateurs d'utiliser une interface familière de type traitement de texte pour la création/modification des articles et d'autres contenus.

tinymce all

Barre d'outils de TinyMCE

TinyMCE peut être configuré avec trois ensembles de boutons de barre d'outils : étendu, avancé et simple. Cette configuration se fait dans Gestion des plug-ins : Plug-ins - Modifier.

Mode de l'éditeur = Etendu

tinymce all extended

Mode de l'éditeur = Avancé

tinymce all advanced

Mode de l'éditeur = Simple

tinymce all simple

Première ligne

La première ligne de la barre d'outils comporte des menus déroulants qui permettent d'accéder rapidement aux fonctions de l'éditeur.

Dans cette section "Première ligne", les menus déroulants sont montrés. Les fonctions seront détaillées dans les sections se rapportant aux autres lignes.

tinymce 1

Fichiers

tinymce 1a file

Editer

tinymce 1b edit

Insérer

tinymce 1c insert

Voir

tinymce 1d view

Format

tinymce 1e format

tinymce 1e format 2

tinymce 1e format 3

tinymce 1e format 4

 

Tableau

tinymce 1f table

tinymce 1f table 2

tinymce 1f table 3

tinymce 1f table 4

Outils

tinymce 1g tools

Deuxième ligne

tinymce 2

IcôneFonctionDescription
  Gras Mettre en gras
  Italique  Mettre en italique 
  Souligné  Souligner le texte 
  Barré  Barrer le texte 
  Aligné à gauche  Aligner à gauche
  Aligné au centre  Centrer le texte 
  Aligné à droite  Aligner à droite
  Justifié Justifier le texte (aligné à gauche et à droite)
Formats   En-têtes Définir le type d'en-tête
en place   Définir la typographie du texte
Blocs   Définir les type de blocs 
Alignement Définir l'alignement
div.caption Définir un bloc div avec titre
hr.system-pagebreak ? (Voir le bouton "Saut de page")
Paragraphe   Paragraphe Choisir un type de titre ou de paragraphe
Font Family   Polices Choisir une police de caractère
Font Sizes   Taille police Choisir une taille de caractère 

Troisième ligne

tinymce 3

IcôneFonctionDescription
  Trouver et remplacer Trouver et remplacer (dans une fenêtre pop-pup)
  Puces Créer une liste à puces avec choix du type de puce
  Numérotation Créer une liste numérotée avec choix numérotation
  Diminuer le retrait Enlever une indentation 
  Augmenter le retrait Ajouter une indentation 
  Annuler Défaire la dernière opération
  Rétablir Refaire l'opération qui vient d'être défaite 
  Insérer/éditer un lien Insérer/éditer un lien (dans une fenêtre pop-pup)
  Enlever le lien Supprimer le lien sélectionné
  Ancre Insérer une ancre (lien interne à l'article)
  Insérer/éditer une image Insérer/éditer une image (dans une fenêtre pop-pup)
  Code source Voir le code HTML
  Couleur du texte Mettre le texte en couleur
  Couleur d'arrière-plan Surligner le texte 
  Plein écran Afficher l'éditeur en mode normal ou plein écran

Quatrième ligne

tinymce 4

IcôneFonctionDescription
  Tableau Insérer un tableau (voir ci-dessous)
  Indice Mettre en indice
  Exposant Mettre en exposant
  Caractères spéciaux Insérer un caractère spécial (dans une fenêtre pop-pup)
  Emoticônes Insérer une émoticône
  Insérer/éditer une vidéo Insérer/éditer une vidéo (dans une fenêtre pop-pup)
  Ligne horizontale Insérer une ligne horizontale
  Gauche à droite Définir la direction du texte de gauche à droite
  Droite à gauche Définir la direction du texte de droite à gauche 

Tableau

tinymce 4 table

  • Insérer un tableau : Permet de créer un tableau en donnant graphiquement le nombre de colonnes et de lignes (voir image ci-dessus)
  • Propriétés du tableau : (dans une fenêtre pop-up) largeur, hauteur, espacement inter-cellules, espacement interne cellule, bordure, titre, alignement.
  • Supprimer le tableau : Permet de supprimer le tableau sélectionné.
  • Cellule :
    • Propriétés de la cellule : (dans une fenêtre pop-up) : largeur, hauteur, type de cellule (contenu ou en-tête), étendue (n/a, ligne, colonne, groupe de lignes, groupe de colonnes), alignement.
    • Fusionner les cellules : (dans une fenêtre pop-up) : colonnes, lignes.
    • Diviser la cellule : Permet de de diviser la cellule précédemment fusionnée.
  • Ligne :
    • Insérer une ligne avant
    • Insérer une ligne après
    • Effacer la ligne
    • Propriétés de la ligne : (dans une fenêtre pop-up) : type de ligne (en-tête, corps, pied), alignement, hauteur.
    • Couper la ligne
    • Copier la ligne
    • Coller la ligne avant
    • Coller la ligne après
  • Colonne :
    • Insérer une colonne avant
    • Insérer une colonne après
    • Effacer la colonne

Cinquième ligne

tinymce 5

IcôneFonctionDescription
  Insérer date/heure Ouvre une liste déroulante pour insérer la date ou l'heure
  Couper (Ctrl+X) Déplacer le texte sélectionné vers le presse-papier
  Copier (Ctrl+C) Copier le texte sélectionné vers le presse-papier 
  Coller (Ctrl+V) Insèrer le contenu du presse-papier 
  Caractères invisibles Afficher les caractères invisibles (ex: fin de paragraphe)
  Blocs Afficher les blocs 
  Espace insécable Insérer un espace insécable
  Blockquote Insérer/supprimer une citation (blockquote) 
  Ajouter un thème Permet d'ajouter un thème (Snippet ou Layout)
  Imprimer Imprimer le document 
  Prévisualiser Prévisualiser le document

Editeur CodeMirror

codemirror

CodeMirror n'est pas un éditeur WYSIWYG. Il permet de faciliter la saisie de code HTML (HyperText Markup Language) en numérotant les lignes, en mettant en couleur les balises HTML et en automatisant la fermeture des balises HTML.

Pour utiliser cet éditeur, il faut que les utilisateurs aient une compréhension de base du langage HTML pour créer et présenter le contenu. Voir les références ci-dessous pour plus d'informations concernant l'utilisation de balises HTML lors de la création de contenu ou des articles :

Editeur Non WYSIWYG

nonwysiwyg

Si "Editeur - Non WYSIWYG" est sélectionné pour un utilisateur, il s'affiche un simple éditeur de texte. Cela vous permet de saisir en brut du HTML non formaté.

Notez que l'option "Non WYSIWYG" peut être utile si vous saisissez du HTML personnalisé, par exemple pour créer un lien PayPal. TinyMCE reformatte automatiquement et retire certains codes HTML lorsque le fichier est enregistré. Cela peut provoquer des problèmes de fonctionnement d'un code HTML complexe.

Si cela se produit, vous pouvez modifier temporairement l'éditeur à "Non WYSIWYG" et créer le contenu souhaité. Notez que si vous souhaitez re-modifier ce contenu dans le futur, il sera prudent de changer avant votre éditeur à "Non WYSIWYG". Sinon, si vous ouvrez et enregistrez le contenu avec TinyMCE, vous risquez de perdre votre code HTML personnalisé.

Boutons d'édition

Sous la zone de saisie de texte se trouvent des boutons supplémentaires d'édition :

buttons

Article button article

Le bouton Article permet d'insérer un lien vers un article du site. Il ouvre une fenêtre pop-up avec la liste des articles existants et des filtres de recherche pour limiter la liste. Sélectionnez l'article vers lequel va pointer le lien en cliquant sur son titre.

Image button image

Le bouton Image permet d'insérer une image dans l'article. Vous pouvez aussi utilisez l'icône Image de la barre d'outils de TinyMCE. Pour ajouter de nouvelles images il est plus facile d'utiliser le bouton Image sous la zone de texte. En effet, il vous permet de naviguer parmi les images pour rechercher celle que vous souhaitez, il vous permet aussi de transférer des images sur le serveur de votre site. Cependant, pour modifier une image existante, vous devrez utiliser l'icône de TinyMCE. Le bouton Image ne permet que d'ajouter de nouvelles images.

Saut de page button page break

Le bouton Saut de page permet d'insérer une table des matières pour des articles couvrant plusieurs pages. Placez le curseur à l'emplacement choisi pour le Saut de page et cliquer sur le bouton. Cela lance une fenêtre pop-up où vous pourrez configurer le titre et l'alias de la page pour la table des matières.

Lire la suite... button read more

Le bouton Lire la suite... vous permet de gagner de la place sur la page d'accueil ou sur tout affichage en blog en ne montrant que la première partie de l'article. Cette première partie appelée introduction est celle qui se trouve avant l'endroit où vous avez insérez la marque Lire la suite... Pour que l'utilisateur puisse voir la totalité de l'article il faudra qu'il clique sur Lire la suite... à la fin de l'introduction.

Basculer l'éditeur button toggle editor

Le bouton Basculer l'éditeur n'est fonctionnel qu'avec permet de basculer entre l'éditeur TinyMCE et l'éditeur Non WYSIWYG. Cela permet de saisir directement du code HTML. Attention : TinyMCE reformatte automatiquement et retire certains codes HTML lorsque le fichier est enregistré.

Informations en relation

Navigation dans l'aide