Configurer un éditeur WYSIWYG (utiliser CKeditor)

Contributeurs

Statut du tutoriel : 

À jour

Catégorie du tutoriel : 

Niveau du tutoriel : 

Modules utilisés : 

Activer les bons modules

Aller dans Menu d’administration : Modules. Activer dans l'onglet Interface utilisateur, "CKeditor" et dans l'onglet Media, "IMCE".

Note 1 : ces onglets ne sont présent que si vous utilisez le module "Module Filter".

Note 2 : Plutôt que IMCE, vous pouvez à la place utiliser le module "Media", tutoriel ici.

Configurer IMCE

"IMCE" permet d'ajouter du contenu de type image par exemple directement dans les zones de textes gérées par l'éditeur.
Cliquer sur Menu d’administration : Configuration puis sur IMCE et assigner le profil déjà existant Sample Profil aux utilisateurs du site. Il suffit de choisir Sample Profil dans la liste déroulante de la ligne Utilisateur authentifié et d'enregistrer cette configuration en cliquant sur le boutton en bas.
Il est également possible de modifier le profil (changer les extensions autorisées, les quotas des utilisateurs, les endroits où sont stockés les fichiers uploadés, etc.)

Note 1 : mettre le profil USER-1 au rôle administrateur dans la configuration de "IMCE".

Note 2 : en bas de la page d'administration d'IMCE, se trouve les Paramètres communs, paramètres pouvant être intéressant de configurer.

Configurer CKEditor

CKEditor est un éditeur WYSIWYG très complet et très configurable. Nous vous proposons une configuration de base, ne pas hésiter à l'adapter à ses besoins !
Aller dans Menu d’administration : Configuration > Rédaction de contenu > CKeditor.
Les profils permettent d'associer un rôle d'utilisateur à une configuration de l'éditeur.
Cliquer sur Modifier en face d'un profil (par exemple profil advanced).

Cliquer sur Paramètres de base ou Basic setup et cocher le format d'entrée à associer à ce profil (Plain text affiche le texte tapé sans interprétation, Filtered html affiche le texte en interprétant certaines balises html choisies par l'administrateur (permet d'éviter les scripts malveillants d'utilisateurs malveillants !), Full html interprète toute les balises html et est donc à réserver aux personnes de confiance.).

Inutile de cliquer sur Sécurité.

Inutile de cliquer Paramètres de visibilité pour le moment (on y trouve des options pour choisir s'il faut afficher l'éditeur dans certaines zones du site)

Apparence de l'éditeur (peut être laissé tel quel pour ce tuto) permet de configurer la langue de l'interface, les plugins activés et les boutons à disposition ainsi que d'autres options.

Nettoyer et afficher pourra être utilisé ultérieurement : on définit des options de mise en page, notamment ce qui se passe lorsqu'on va à la ligne en tapant sur la touche Entrée.

Dans CSS, dans le premier menu déroulant, vérifier que Défaut de CKEditor est sélectionné puis, dans le second menu déroulant, sélectionner Défaut de CKEditor

Dans Paramètres de l'explorateur de fichiers ou File browser settings, choisir IMCE dans le premier menu déroulant.

Dans Options avancées il y a la possibilité d'activer un correcteur orthographique. Pour règler le correcteur orthographique sur français par défaut, ajouter la ligne suivante "config.scayt_sLang = 'fr_FR';" (sans guillemets) dans le cadre "Configuration JavaScript personnalisée".

Cliquer sur Enregistrer.

Configurer le format d'entrée du site

Cette partie permet de bien indiquer à Drupal comment traduire ce que l'on voit dans l'éditeur en langage affichable sur le net.

Il faut alors faire une distinction entre deux types d'utilisateurs : les utilisateurs de confiance et les autres. Les premiers pourront utiliser la pleine possibilité de CKEditor alors que les seconds seront légèrement restreints, pour des raisons de sécurité.

Aller dans Menu d’administration : Personnes > Droits. Descendez jusqu'à Filter cochez la case dans la ligne Filtered html pour les personnes qui ne sont pas de confiance et cocher la case Full html pour les personnes de confiance (la décocher pour les autres si ce n'est pas le cas).

Pour distinger les personnes de confiance des autres, lire le tutoriel suivant sur les rôles et le droits : ici.

Pour configurer les profils "Filtered html" et "Full html" cliquez simplement dessus (normalement c'est en bleu souligné !). En bas de la page dans paramètres de filtrage cliquer sur Limiter les balises html autorisées et à la place de la liste déjà présente copier la liste suivante :

<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol>
<li> <dl> <dt> <dd> <table> <caption> <tbody> <tr> <td> <em> <b> <u> <i> <strong> <del> <ins>
<sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> 

Cela permettra à vos utilisateurs d'insérer des images et/ou de surligner du texte en couleur etc.

Utiliser

Créer un contenu et profiter de son tout nouveau tout beau éditeur WYSIWYG.

Drupalfacile : Episode 70 - Installer et utiliser l'éditeur de texte CKEditor 4

Drupalfacile : Episode 32 - Insérer des images dans un article sous Drupal 7