Installer et personnaliser le module CKEditor pour Drupal 7
La mise en place du module ckeditor pour Drupal peut s'avérer plus compliquée que prévue. Ce rapide guide liste les étapes à suivre pour installer sans encombres le module. Une seconde partie s'intéresse à l'installation de plugins complémentaire étendant les fonctionnalités de cet éditeur wysiwyg de qualité.
Ajouter ckeditor à votre Drupal
Récupération des fichiers
Tout commence par une petite commande drush bien sentie. Si vous ne connaissez pas drush, faites vrombir votre curseur au plus vite pour le récupérer, cet utilitaire en ligne de commandes est un indispensable du développement Drupal (j'y reviendrai). Attention les commandes ci-dessous ne fonctionnent qu'avec les dernières versions de drush, pour les plus anciennes vous devez d'abord télécharger le module (avec le switch "dl").
drush en ckeditor -y
Je vous conseille également de récupérer ckeditor_link qui vous permettra de créér des hyperliens vers vos contenus Drupal directement via l'interface de Ckeditor, indispensable !
drush en ckeditor_link -y
Une fois la récupération des modules faite, rendez vous sur http://ckeditor.com/download pour télécharger la librairie ckeditor.
Une petite personnalisation SEO-friendly
Afin de fournir du code plus moderne, apprécié des moteurs de recherches mais également pour fournir plus d'accessibilité à vos contenus, j'ai l'habitude d'effectuer une petite personnalisation de ckeditor avant de le télécharger : ajouter le support de la balise <figure> et <figcaption>.
Sur la page de ckeditor, prenez l'option "Or let met customize CKEditor" puis le bouton rouge.
Prendez le preset "Full" puis dans la partie basse, colonne de droite trouvez "Enhanced Image" et basculez-le colonne de gauche.
Si vous suivez cette étape, les images que vous chargerez via CKEditor pourront être enrichies de la sémantique HTML5.
Ajoutez ensuite toutes les langues à ckeditor (j'ai rencontré des problèmes en ne choisissant que les langues utilisées sur mes sites), et récupérez votre librairie.
Une fois votre CKEditor téléchargé, placez le contenu de l'archive dans votre dossier /sites/all/modules/contrib/ckeditor/ckeditor .
CKFinder pour gérer vos fichiers
CKEditor ne sait gérer seul l'upload de fichiers sur votre serveur, pourtant il est très utile de pouvoir ajouter des visuels ou attacher des fichiers directement dans le corps de votre texte.
Heureusement, il existe des plugins pour remédier à ce manque.
Le plus connu et utilisé d'entre eux se nomme CKFinder (payant mais possède une version de démonstration avec quelques limitations pour un usage non commercial).
Pour l'ajouter à votre CKEditor, les étapes sont les suivantes :
- Récupérez le plugin ici,
- Drupal cherchera par défaut ckfinder dans le répertoire /sites/all/modules/contrib/ckeditor/ckfinder. Dézippez-le à cet emplacement.
- Pour que le système de droits de Drupal gère correctement les permissions de ckeditor, vous devez modifier le fichier config.php de CKFinder.
Supprimez ces lignes (21-34) :
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.
return false;
}
Et remplacez les par
require_once '../../../../includes/filemanager.config.php';
- Finissez par éditer la variable $cookie_domain de votre settings.php
$cookie_domain = '.votrenomdedomain.ext';
Votre CKFinder est maintenant fonctionnel.
Configuration de CKEditor
Les bases
Par défaut CKEditor a créé deux profils à partir des formats de textes installés par défaut (lors d'une mise en route standard de Drupal). Nous allons voir brievement la configuration d'un de ces profils.
La configuration des profils se fait dans admin/config/content/ckeditor/.
Modifiez l'un des profil qui vous intéresse et dans "Apparence de l'éditeur", choisissez les boutons de barre d'outil à faire apparaitre pour ce profil. Si vous souhaitez de plus activer le CKEditor Link, cochez la case dans la sous rubrique Plugins ET rendez vous dans la configuration du format de texte correspondant pour activer le filtre CKEditor Link afin d'avoir de belles URLs.
Je vous conseille également de limiter les balises dans "Nettoyer et afficher" > "Formats de polices de caractères". Bien souvent la balise H1 est inutile car déjà présente pour le titre de la page, d'autres balises peuvent selon vos cas être inutiles ou source de confusion pour les utilisateurs, à vous de faire le tri.
N'oubliez pas non plus d'activer CKFinder dans les "paramètres de l'explorateur de fichiers".
Une fois ces réglages effectués, CKEditor devrait être visible dans vos zones de textes possédant un format de texte associé à un profil.
Configurations avancées
Très vite, il devient intéressant de pouvoir définir ses propres styles dans ckeditor. Pour ce faire, dans les réglages d'un profil, dans CSS puis styles prédéfinis, définissez le chemin de ckeditor.styles.js, j'ai l'habitude d'utiliser cette syntaxte "%tjs/ckeditor.styles.js" pour appeler le fichier dans le theme principal du site (et non celui de l'administration comme le suggère Drupal !).
L'appel dans le thème évite de supprimer le fichier lors d'une mise à jour du module ou de la librairie.
Vous trouverez la copie originale de ckeditor.style.js dans le répertoire du module CKEditor. Voici un extrait du ckeditor.styles.js que j'utilise sur ce blog :
/*
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*//*
* This file is used/requested by the 'Styles' button.
* The 'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.
*/
if(typeof(CKEDITOR) !== 'undefined') {
CKEDITOR.addStylesSet( 'drupal',
[/* Block Styles */
// code wrapper
{
name: 'Code Wrapper',
element: 'pre',},
/* Inline Styles */
// These are core styles available as toolbar buttons. You may opt enabling
// some of them in the "Styles" drop-down list, removing them from the toolbar.{ name : 'Bleu' , element : 'span', attributes : { 'class' : 'bleu' } },
{ name : 'Orange' , element : 'span', attributes : { 'class' : 'orange' } },{ name : 'Big' , element : 'big' },
{ name : 'Small' , element : 'small' },// code
{
name : 'Code PHP',
element : 'code',
attributes :
{
'class' : 'language-php',
}
},{
name : 'Code CSS',
element : 'code',
attributes :
{
'class' : 'language-css',
}
},{
name : 'Code HTML',
element : 'code',
attributes :
{
'class' : 'language-markup',
}
},{
name : 'Code JS',
element : 'code',
attributes :
{
'class' : 'language-javascript',
}
},...etc
Étendre CKEditor
Ajout de plugins
La communauté de CKEditor a créé un certain nombre de plugins téléchargeables sur cette page : http://ckeditor.com/addons/plugins/all.
Ces plugins s'incorporent directement au ckeditor de votre Drupal en téléchargeant l'archive du plugin, et en l'extrayant deux fois, dans le dossier /modules/contrib/ckeditor/plugins et dans /modules/contrib/ckeditor/ckeditor/plugins. (En réalité il n'est pas nécessaire de tout extraire en double, mais sachez que cette méthode est "sûre").
Une fois vos plugins ajoutés, leur activation se fait dans "Apparence de l'éditeur" > "Plugins".
Création de plugin
Il est évidemment possible de créer son propre plugin CKEditor au sein même de Drupal, je reviendrai sur ce point lors d'un prochain billet.