L’éditeur JCE pour Joomla 3.x : l’utilisation des principales fonctionnalités

Par: Benny | Directeur artistique

Logo de l'éditeur JCE
Source : http://www.sarki.ch/jce/

Notre agence web joomla vous propose une série d’articles sur les fonctionnalités de base de Joomla 3.x

Retrouvez ce dont vous avez besoin dans ces articles :

L’éditeur JCE

L’éditeur JCE est un éditeur de texte enrichi : Il permet de mettre en forme du texte et d’insérer des images ou des liens, avec un rendu à l’écran proche du rendu sur le site.

Il dispose d’une aide complète et claire jce_help , mais malheureusement elle n’est pas disponible en français depuis l’interface d’administration.

JCE reprend le fonctionnement général et l’iconographie des éditeurs de texte classiques tel que Word ou OpenOffice.

Options de mise en forme standard de l’éditeur JCE

  • La mise en évidence de texte : Gras, italique, souligné, barré. Boutons de mise en évidence du texte
  • L’alignement du texte: Justifié, centré, à gauche, à droite.Bouton d'alignement du texte
  • Les listes et l’indentation:
    • Augmenter l’indentation, diminuer l’indentation, liste à puces, liste numéroté.Bouton pour créer des listes
    • Dans une liste lorsque l’on utilise la touche Entrée, un nouvel élément est créé.
    • Pour effectuer un retour à la ligne sans créer de nouvel élément (de nouvelle puce), il faut utiliser la combinaison de touche Majuscule + Entrée
  • Les couleurs :
    • Couleur de texte, couleur de fond.Boutons pour choisir la couleur du texte
    • En cliquant sur le lien « Plus de couleurs … » une fenêtre apparaît avec notamment l’onglet « Template » offrant la possibilité de récupérer l’ensemble des couleurs utilisées dans votre site
  • Les styles prédéfinis : Choix du format du texte /Choix du style du texteType de bloc (paragraphe, titre,…), taille de la police, styles prédéfinis par nos soins, indice, exposant. Dans un paragraphe ou un titre lorsque l’on utilise la touche Entrée, un nouveau paragraphe est créé.Pour effectuer un retour à la ligne sans créer de nouveau paragraphe, il faut utiliser la combinaison de touche Majuscule + Entrée. Il est possible d’afficher le découpage des blocs (et les autres élément « invisible », tel que les espaces insécables ) en utilisant les boutons. Les titres sont symbolisés par un H suivi d’un chiffre représentant le niveau de celui-ci, tandis que les paragraphes sont symbolisés par un P.
  • Les tableaux : Boutons pour créer et modifier un tableau dans l'éditeur JCE Ajouter/éditer un tableau, suppression d’un tableau, propriété de la ligne, propriété de la cellule, ajouter une ligne, …Chaque bouton ouvre une fenêtre où il est possible de configurer les différentes propriétés (nombre de lignes, nombre de colonnes, dimension du tableau, bordures, dimension d’une cellule, couleur de fond, …)

Options avancées de l’éditeur

  • La correction d’orthographe : Correction d'orthographe automatique En Activant le correcteur orthographique, les mots posant problème sont soulignés en rouge. Il suffit alors de cliquer sur les mots soulignés pour voir apparaître les options du correcteur d’orthographe.
  • Annuler / Rétablir: Annuler et rétablir Notez que le fait d’enregistrer le formulaire ou se trouve l’éditeur, empêche toute possibilité de revenir à des modifications antérieures
  • Collages, Couper, Copier, Coller: Les boutons copier/coller Lors d’un copier/coller depuis Word ou un autre éditeur de texte, il est conseillé d’utiliser l’option « Coller du texte brut » (plutôt que Ctrl+V dans la fenêtre) afin de ne pas avoir de « styles » parasites.Une autre solution consiste à utiliser la fonction effacer les styles pour retirer les styles parasites une fois le texte collé.
  • Lire la suite : Bouton pour insérer un lien lire la suite Placer un lien lire la suite permet de découper l’article en 2 parties : Texte d’introduction (avant le lien) et l’article complet (après le lien). Cette fonctionnalité est notamment utilisée dans les affichages blog.
  • Définir précisément un style : Définir précisement un style Cette fonction ouvre une fenêtre permettant de modifier tous les paramètres de styles du texte sélectionné (couleurs, taille de police, marges, bordures, …)
  • Nettoyer les styles : Bouton pour nettoyer les style dans l'éditeur Lors d’un copié/collé depuis un autre éditeur ou lorsqu’un même texte est remanié et changé de forme un grand nombre de fois, il peut arriver que de nombreux styles s’imbriquent entre eux et interfèrent.L’effacement des styles permet de remédier à ce problème, tout en conservant la hiérarchisation du texte (paragraphes, titres, listes), les images et les liens.

La gestion des images

Le bouton Bouton pour insérer une image dans JCE permet d’insérer une image. Il ouvre la fenêtre ci-contre, qui se découpe en deux partis

  • Le gestionnaire de fichiers de l’éditeur JCE permet :
    Le gestionnaire de fichiers

    • De naviguer dans les dossiers du serveur et de sélectionner une image. Le cadre « Détails » reprend les informations de l’image sélectionnée et permet diverses opérations comme la renommer, la supprimer, etc.En cliquant sur une image, les champs URL, description et dimensions de l’image sont automatiquement remplis.
    • D’ajouter un dossier.
    • D’envoyer un ou plusieurs fichiers sur le serveur Capture d’écran 2014-03-10 à 11.45.41. Cliquez ensuite sur « Parcourir » pour sélectionner un ou plusieurs fichiers sur votre ordinateur puis « Envoyer ».
  • Les informations d’affichages, elles reprennent :
    Information d'affichage d'une image dans JCE

    • L’url de l’image.
    • Un descriptif (nécessaire pour l’accessibilité numérique, balise alt).
      • Si l’image est décorative (et n’apporte donc aucune information complémentaire), laisser ce champ vide
      • Si l’image apporte une information complémentaire (et contient du texte, par exemple), écrire ces informations dans ce champ
    • Les dimensions d’affichage en pixel : On peut réduire l’affichage de l’image en gardant les proportions grâce à ces paramètres. Toutefois, par souci de vitesse de chargement, il est déconseillé de réduire de plus de la moitié les dimensions d’origine de l’image par ce biais.
    • L’alignement / l’habillage de l’image (visible grâce à la prévisualisation)
    • Les marges et bordures.

Insérer un lien

L’éditeur JCE permet de créer un lien facilement en sélectionnant le texte ou l’image où l’on veut placer le lien et en cliquant sur Bouton pour insérer un lien . la fenêtre ci-contre apparaît alors.Les champs à remplir sont :

  • URL : champ url

    • Pour les liens vers une page du site, utilisez l’explorateur de liens pour naviguer dans les menus et cliquez sur la page souhaité pour remplir automatiquement le champ.
    • Pour les liens vers un fichier, utilisez pour ouvrir le gestionnaire de fichiers.
    • Pour les liens envoyant un email, utilisez et complétez les emails.
    • Pour les liens « externe » (vers d’autre site), entrez directement l’url.
  • Cible : option pour un lien externe
    Il permet si besoin, d’afficher la cible du lien dans une nouvelle fenêtre, typiquement pour les liens externes ou vers des fichiers.
  • Titre : Capture d’écran 2014-03-10 à 11.39.01
    Il permet de renseigner des informations complémentaires, qui apparaissent sous forme d’infos bulles lorsque la souris survole le lien et, qui sont nécessaires pour des soucis d’accessibilité numériques.Il doit toujours reprendre le libellé du lien ajouté à des informations complémentaires :

    • Pour l’ouverture dans une nouvelle fenêtre : libellé du lien + « [nouvelle fenêtre] » (exemple : site du cinéma Le Cyrano [nouvelle fenêtre])
    • Pour l’ouverture d’un lien PDF : libellé du PDF + « [PDF | poids du pdf] » (exemple : PROGRAMME CINEMA JUIN 2013 [PDF | 170ko])
  • L’onglet « Popups » : Onglet pour créer une popup
    Il permet de configurer l’ouverture du lien dans une fenêtre s’affichant devant le site (popup).

Insérer un pop-up pour l’agrandissement de l’image

  • Télécharger votre photo comme vu précédemment dans la gestion de vos images
    • Cliquez sur le bouton Choisir une photo   dans la barre des tâches de l’éditeur
    • Puis cliquer sur le bouton  pour télécharger votre imageTélécharger une photo
    • Cocher les cases « Redimensionner » et « Miniature » (et éventuellement « Recadrer ») afin de générer la miniature automatiquement
      Option d'une image
    • Envoyer votre photo
  • Paramétrer l’affichage avec popup
    Paramètre de la popup

    • Cliquez sur l’onglet « Popups »
    • Dans le champ type, sélectionnez « Popups JCE MediaBox »
    • Si vous avez plusieurs photos dans votre article et que vous souhaitez pouvoir faire défiler vos photos dans le même pop-up, attribuez un nom au champ Groupe (que vous mettrez donc à chacune de vos photos)
  • Cliquez sur la photo que vous voulez insérer
  • Cliquez sur « oui » dans le pop-up qui apparaît : « Utilisez la miniature associée ? » (les champs url dans l’onglet « Popups » ainsi que dans l’onglet « Image » sont remplis automatiquement)
  • Cliquez sur Bouton pour insérer la popup

Si vous souhaitez créer vos miniatures vous-même (pour mieux les compresser par soucis de poids), vous devrez :

  • Télécharger vos photos comme vu précédemment dans la gestion de vos images
    • Cliquez sur le bouton Télécharger une image dans la barre des tâches de l’éditeur
    • Puis cliquer sur le bouton pour télécharger vos images
    • Envoyer vos photos
    • Cliquer sur la miniature de votre photo dans le gestionnaire de fichiers afin que les champs URL, description et dimensions de l’image soient automatiquement remplis.
  • Paramétrer l’affichage avec popup
    • Cliquez sur l’onglet « Popups »
    • Dans le champ type, sélectionnez « Popups JCE MediaBox »
    • Cliquer sur l’agrandissement de votre photo dans le gestionnaire de fichiers afin que le champs soit automatiquement remplis.
    • Si vous avez plusieurs photos dans votre article et que vous souhaitez pouvoir faire défiler vos photos dans le même pop-up, attribuez un nom au champ Groupe (que vous mettrez donc à chacune de vos photos)
  • Cliquez sur Insérer dans l'article

Cet article a été rédigé par:

Benoit Duriez | 15 ans d'expérience

Directeur artistique

Graphiste, vidéaste, photographe et illustrateur

Vous êtes un d'accélérer votre projet