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

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 , 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é.
L’alignement du texte: Justifié, centré, à gauche, à droite.
Les listes et l’indentation:
- Augmenter l’indentation, diminuer l’indentation, liste à puces, liste numéroté.
- 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.
- 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 : /Type 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 : 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 : 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: 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: 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 : 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 : 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 : 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 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 :
- 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 . Cliquez ensuite sur « Parcourir » pour sélectionner un ou plusieurs fichiers sur votre ordinateur puis « Envoyer ».
Les informations d’affichages, elles reprennent :
- 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 . la fenêtre ci-contre apparaît alors.Les champs à remplir sont :

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 :
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 :
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 » :
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 dans la barre des tâches de l’éditeur
- Puis cliquer sur le bouton pour télécharger votre image
- Cocher les cases « Redimensionner » et « Miniature » (et éventuellement « Recadrer ») afin de générer la miniature automatiquement
- Envoyer votre photo
Paramétrer l’affichage avec 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

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 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