Logo JCE

Résumé du test

  • Intuitivité :excellent
  • Stabilité :excellent
  • Support :bon
  • Sécurité :excellent
  • Mises à jour : excellent
  • Interropérabilité :excellent
  • Licence : cd gratis

JCE Editor est l'extension de base pour toute installation Joomla. Ce composant / plugin apporte non seulement tout ce qu'un éditeur WYSIWYG a de meilleur, mais son intégration à Joomla et ses fonctionnalités complémentaires en font l'extension Joomla de référence.

Ce n'est pas un hasard si le J!Oscar de la meilleur extension lui est revenu. Basé sur l'architecture de TinyMCE, JCE Editor réhausse considérablement votre productivité avec Joomla et à cet effet nous vous conseillons vivement de l'adopter comme éditeur par défaut.

icone editor3 Les fonctionnalités avancées d'un bon éditeur de base

JCE Editor propose toutes les fonctionnalités d'un éditeur WYSIWYG standard mais a surtout l'avantage de pouvoir les gérer avec précision. En effet, en plus de l'habituel plugin, un composant vient s'ajouter nous donnant accès à l'ensemble de la configuration de JCE et à la gestion ACL des profils utilisateurs.

Suite à l'installation de JCE, il faut le définir comme éditeur par défaut, pour cela rendez-vous dans Système => Configuration => Site => Éditeur par défaut.

La configuration globale de l'éditeur

La configuration par défaut est rarement modifiée sauf dans des contextes particuliers.

JCE configuration miniLa configuration globale de JCE Editor

Chaque paramètre est clairement défini par une info-bulle au survol de la souris.

A connaitre : le paramètre de combinaison clavier pré-sélectionné pour la rédaction de vos textes est le suivant :
ENTER = nouveau paragraphe (équivalent à 2 sauts de ligne)
SHIFT + ENTER = saut de ligne simple

La gestion des profils JCE

La gestion des profils JCE va vous permettre de définir les droits qu'auraient vos utilisateurs et/ou vos groupes avec l'éditeur en administrant la barre d'outils, les paramètres de l'éditeur et les paramètres des plugins. Chaque profil JCE est associé à un groupe utilisateur.
Si vous ne gérez pas ce type de notion, utilisez simplement le profil par défaut "Default". Ses paramètres par défaut sont bien adaptés à une utilisation courante de l'éditeur.

JCE liste profilsLa liste des profils JCE créés par défaut

Pour paramétrer les spécificités de chaque profil, il suffit de cliquer sur le nom du profil "Default", "Front End" ...

Onglet "Généralités" : pour chaque profil, on va pouvoir définir :

  • s'il dispose de JCE en front-end, dans l'administration ou les 2,
  • si JCE lui est accessible sur tous les périphériques (peu utile),
  • JCE comme éditeur par défaut des composants installés, par exemple Acymailing,
  • à quel groupe d'utilisateur ACL il est associé.

JCE profil generalitesLes généralités du profil JCE

Onglet "Barre d'outils" : pour chaque profil définissez les icônes/fonctions constituant la barre d'outil. Nous conseillons de laisser les autres paramètres avec leurs valeurs par défaut et de cocher les "Fonctions supplémentaires".

JCE profil barre outilsUn paramétrage précis des profils JCE

Onglet "Paramètres de l'éditeur" : la plupart des paramètres resteront inchangés, 2 paramètres méritent quelquues précisions :

1- Nettoyage et sortie - "Urls relatives" : l'image ci-dessous déploie une info-bulle très complète qui explique la notion d'url relative, c'est-à-dire n'incluant pas le nom de domaine du site. Ce n'est à priori pas un paramètre à modifier mais cette notion est importante, nous y reviendrons par la suite dans cet article.JCE profil parametres editeur
2- Fichier système - "Poids maximum d'envoi" : ce paramètre peut parfaitement être modifié (il est par défaut de 1024Ko). Si vous indiquez 100 pour 100ko de poids maximum, et si vous tentez de charger via JCE une image d'un poids supérieur, un message d'alerte bloquant sera affiché. Le poids des images ayant un impact très fort sur les performances de votre site, se poser une limite peut être très utile.

JCE profil parametres editeur poids image

JCE profil parametres editeur poids image alerte

Onglet "Paramètres des plug-ins" : on ne peut pas détailler ici toutes les possibilités, arrêtons-nous sur quelques sujets courramment rencontrés.

1- Permettre l'insertion d'Iframes : peu recommandée par Google, parfois il n'y a pas d'autre solution que d'insérer un Iframe, il faut mettre son paramètre d'autorisation à "Oui" ("Non" par défaut"). Pour cela il faut descendre dans la liste des plug-ins jusqu'à "Support de médias" et mettre "Autoriser les iframes" à "Oui".

JCE autoriser insertion iframe

 2- Utiliser vos propres styles CSS : c'est-à-dire ceux que vous utilisez de façon récurrente. Prenons l'exemple du soulignement de titres h2 ou h3 qui revient très souvent et qu'il convient de gérer de façon homogène sur tout le site.
Pour cela il faut connaitre un peu le css et savoir où placer vos propres css (cela dépend de votre template), en général le fichier s'appelle "custom.css" ou "custom.scss".
Donc créons une classe css comme ceci :
.borderh{
border-bottom:2px solid #37b6bd;
padding-bottom:5px
}

En "Paramètres de plug-ins" descendre jusqu'à "Styles css", avec un nom (dans notre exemple ci-dessous "Border h2,h3"), une balise permettant de délimiter l'application de la classe css (dans notre exemple "span"), et enfin la classe css (dans notre exemple "borderh").

JCE parametre plugin styles css

Après avoir validé, le style css est disponible dans l'éditeur au sein de la boite de sélection :

JCE parametre plugin styles css editeur

Il suffit alors de sélectionner le texte auquel on souhaite appliquer le style css, de sélectionner le style css et appliquer ainsi la même méthode de façon récurrente.

Ce qui donne le résultat suivant, dans le HTML et en front-end :

JCE parametre plugin styles css HTML

3- Mettre en place le vérificateur orthographique : en "Paramètres de plug-ins" descendre jusqu'à "Vérificateur orthographique" et paramétrer comme ci-dessous.

JCE véification orthographique éditeur Joomla

Les gestionnaires de liens et d'images

Une fois tout ceci paramétré (ou laissé par défaut), JCE Editor nous propose dans sa barre d'outils les icônes habituelles d'un éditeur telles que l'alignement des textes, l'ajout de tableau, les balises HTML ("Paragraphe" etc...), les styles de police,...

Les 2 icônes qui se démarquent nettement sont celles relatives a gestionnaire de lien icone lien et au gestionnaire d'images icone image.

Le gestionnaire de liens

Le gestionnaire de liens nous permet de gérer l'ensemble des attributs HTML d'une balise <a></a>, mais aussi surtout de gagner un temps considérable dans la construction de nos liens dans les articles. En effet, une arborescence de ressources Joomla est à notre disposition afin de nous permettre de faire un lien vers un article, un contact ou encore un élément de menu, et ce d'un simple clic.

Dans l'image ci-dessous, par exemple, on recherche en 1 un élément de menu dans l'arborescence, et en 2 s'affiche automatiquement l'url non-SEF correspondante. Cette url non-SEF n'aura pas vocation à être modifiée, elle est très pratique car si vous modifiez l'alias de l'élément de menu (ce qui arrive parfois), l'url sur ce lien restera valide.

JCE icone liensUn explorateur de lien très productif !

L'image ci-dessous illustre la possibilité de rechercher par mot-clé un article/élément de menu vers lequel on souhaite paramétrer un lien : 1 = élément recherché, 2= sélection d'un des items trouvés, 3 = url non-SEF de cet item.

JCE icone liens 2

Le gestionnaire d'image

Le gestionnaire d'image est lui aussi tout aussi évolué puisqu'il va nous permettre de :

  • Uploader des images via un simple glissé-déposé
  • Renommer les fichiers
  • Créer des dossiers pour l'arborescence
  • Gérer l'ensemble des dossiers (création / suppression) de notre arborescence.

Par conséquent, ce gestionnaire d'image proposé par JCE peut se substituer à un client FTP comme FileZilla, ou au gestionnaire des médias en Contenus/Médias, pour gérer l'ensemble des images de votre site Internet Joomla.

JCE gestionnaire imagesUn gestionnaire d'image complet

Icon H2 Jce La version PRO de JCE : les principales fonctionnalités

La version PRO de JCE apporte les fonctionnalités suivantes :

  • la colorisation du code HTML qui offre un confort de lecture,
  • l'insertion d'une video en HTML5 ou en indiquant simplement le lien (par exemple Youtube), avec l'icône "Insérer/Modifier un Média" JCE icone media manager,
  • le téléchargement puis la mise en place d'un lien vers un fichier (par exemple PDF), avec l'icône "File Manager" JCE icone file manager,
  • un gestionnaire d'images offrant de multiples possibilités pratiques : recadrage d'image, création de vignettes (thumbnails), création de pop up (LightBox et RokBox), une fonction responsive (attribut srcset), avec l'icône JCE icone image manager etendu
  • la possibilité d'insérer des légendes pour les images avec les icônes JCE icones legende,
  • insertion d'iframes, avec l'icône JCE icone iframe
  • la possibilité d'insérer des watermarks ou copyright (à paramétrer en "Profils JCE / Paramètres de l'éditeur / Fichiers Systèmes").

Activation des fonctionnalités PRO : après installation du packaage de JCE PRO, il faut installer les icônes PRO dans votre barre d'outils en JCE/Profiles/Default/Barre d'outils et par glisser-déposer comme illustré dans cet article.

Configuration des fonctionnalités PRO : comme développé précédemment vous trouverez en "Profils JCE / Default / Paramètres des plug-ins" et en "Profils JCE / Paramètres de l'éditeur / Fichiers Systèmes" les paramètres de configuration associés à ces fonctions.

Le gestionnaire d'images étendu ou "mini Photoshop"

Pour rappel sur les versions PRO et gratuite, en cliquant sur JCE icone envoyer, vous pouvez télécharger plusieurs images à la fois et les renommer avant chargement dans le dossier sur votre serveur.

Lorsque vous sélectionnez une image, une barre d'icônes apparaît sur la droite du gestionnaire d'images. L'icône "Edit image" (cf image ci-dessous) vous permet d'accéder à une interface pour modifier votre image.

JCE icone edit image

Au sein de cette interface vous allez pouvoir :

  • redimensionner l'image (aussi possible au chargement de l'image)
  • recadrer l'image 
  • générer un thumbnail / vignette, (aussi possible au chargement de l'image)
  • appliquer une rotation et une symétrie
  • appliquer des effets de filtre
  • optimiser le poids de l'image lors de la sauvegarde de vos modifications.

Ci-dessous les modifications possibles lors du chargement de l'image.

 JCE image manager chargement dimensionsPossibilité de redimensionner et créer une vignette au chargement de l'image

Ci-dessous le recacdrage de l'image au sein de l'interface de modification :

JCE image manager edit image recadrage

Si on n'a pas créé de vignette lors du chargement, le 1 dans l'image ci-dessous indique l'icône qui permet de le faire a posteriori. La vignette est alors créée dans un dossier "thumbnails". Cette m^me icône permet de supprimer une vignette. Le design de l'icône change selon qu'on se trouve dans le dossier "thumbnails" ou dans un dossier d'images normales.

JCE image manager resultat nouvelles dimensions et thumbnail

Ci-dessous, un exemple d'effet, à consommer avec modération ....

JCE image manager effets

Ci-dessous, lorsqu'on valide, la réduction de la qualité de l'image (75% est une bonne valeur) optimise fortement le poids de l'image.

JCE image manager validation dimensions

Pop up et utilisation de vignettes

Un autre intérêt majeur de JCE PRO consiste à pouvoir générer des pop up, par exemple une grande image à partir d'une vignette.

La première étape consiste à sélectionner l'image qui va porter la pop up, à savoir la vignette (mais cela peut être aussi une petite image qui n'est pas stockée dans le dossier "thumbnails").

JCE popup sélection vignette

La seconde étape consiste à sélectionner le type de pop up (ici "RocketTheme Rokbox") et l'image qui y sera placée (son url sera alimentée autmatiquement).

JCE popup sélection image

Voici le résultat :

la-rochepot-952-600

Consultez notre article Les plugins JCE : RokBox et LightBox, pour découvrir comment initialiser les popup de type LightBox et Rokbox dans vos articles.


Les paramètres de configuration

 

Icone infosInformations complémentaires

Si la prise en main de JCE Editor vous pose problème, n'hésitez pas à nous solliciter sur le forum en devenant membre de la communauté.
 

logo tuto joomlaNos tutoriels JCE en vidéo

icone liensLiens utiles

 

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !

L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
Résumé du test Intuitivité : Stabilité : Support : Sécurité : Mises à jour : Interropérabilité :...
L'effet miroir avec Photoshop CS4 L'effet miroir avec Photoshop CS4
Pour ce deuxième tuto, j'ai décidé de vous expliquer comment appliquer un effet miroir sur une image toujours...

Commentaires (2)

This comment was minimized by the moderator on the site

Bonjour,

https://www.joomlacontenteditor.net/downloads/editor
Quel JCE faut il choisir? Core ou Legacy?

Merci pour l'article et l'aide.

This comment was minimized by the moderator on the site

Hello,

Il y a maintenant la version JCE 2.6 Free ou Pro depuis aujourd'hui.
La version Pro apporte vraiment sa valeur ajoutée et l'investissement de 25 € vaut vraiment le coup.

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Les nouveautés de Joomla 3.9Les nouveautés de Joomla 3.9
Joomla 3.9 apporte un certain nombre de nouveautés fondamentales avec en premier lieu l'environnement de conformité au RGPD. Mais également un certain nombre d'améliorations utiles et...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok