- Intuitivité :
- Stabilité :
- Support :
- Sécurité :
- Mises à jour :
- Interropérabilité :
- Licence :
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.
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.
La configuration globale de l'éditeur
La configuration par défaut est rarement modifiée sauf dans des contextes particuliers.
La configuration globale de JCE Editor
Chaque paramètre est clairement défini par une info-bulle au survol de la souris.
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.
La 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é.
Les 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".
Un 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.
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.
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".
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").
Après avoir validé, le style css est disponible dans l'éditeur au sein de la boite de sélection :
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 :
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.
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 
et au gestionnaire d'images 
.
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.
Un 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.
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.
Un gestionnaire d'image complet
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"
, - le téléchargement puis la mise en place d'un lien vers un fichier (par exemple PDF), avec l'icône "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
- la possibilité d'insérer des légendes pour les images avec les icônes
, - insertion d'iframes, avec l'icône
- 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 
, 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.
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.
Possibilité 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 :
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.
Ci-dessous, un exemple d'effet, à consommer avec modération ....
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.
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").
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).
Voici le résultat :
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
Informations complémentaires
- Retrouvez la formation vidéo complète de JCE (videos un peu anciennes mais les grands principes perdurent)
- Télécharger le pack FR de JCE Editor sur le portail francophone
- Télécharger la version officielle sur le site de l'auteur
- Les plugins sont téléchargeable sur cette page
- D'autres plugins non-officiels, notamment pour les liens rapides, sont disponibles sur le JED
Nos tutoriels JCE en vidéo
Liens utiles
Articles qui devraient vous intéresser
Convertir en UTF-8 avec NotePad++
L'effet miroir avec Photoshop CS4
