Drupal : Utilisation du module CKEditor

Par défaut, Drupal 7 ne possède pas d'éditeur Wysiwyg qui facilite grandement l'édition de noeud et ne nécessite pas de connaitre le language HTML et CSS.

Après plusieurs années à utiliser le module Wysiwyg et un editeur externe (TinyMCE ou CKEditor par exemple), j'ai finalement fait la démarche d'utiliser le module CKEditor qui est plus complet à mon sens. Voici la procédure pour l'installer, le configurer et utiliser des styles personnalisés.

Tout d'abord vous devez installer et activer le module ckeditor

Configuration

Premièrement, on définit la liste des balises autorisées dans le format Filtered HTML

• Aller dans Configuration puis Formats de texte
• Configurer le format Filtered HTML
• Dans les Paramètres de filtrage, sélectionner Limiter aux balises HTML autorisées et introduire <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>
• Cliquer sur Enregistrer la configuration

Dans la plupart des cas, je ne modifie qu'un seul paramètre dans la configuration de CKEditor (mis à part la liste des boutons disponibles dans l'éditeur)

Je dis à CKEditor d'utiliser le CSS du thème pour avoir le même visuel entre la consultation d'un noeud et sa création/modification. Pour cela

• Aller dans Configuration puis CKEditor
• Modifier le profil Advanced
• Dans la section CSS, sélectionner Use theme CSS pour le champ Editor CSS
• Cliquer sur Enregistrer

Utilisation des styles avec le format de texte Filtered HTML

Le moteur de Drupal retire les balises de style pour le format de texte Filtered HTML. Par contre il est possible d'utiliser des classes. Nous allons donc définir des styles personnalisés utilisant les classes.

Pour cela,

• Faire une copie du fichier sites/all/modules/ckeditor/ckeditor.styles.js dans le répertoire de votre thème.
• Dans Drupal, aller dans Configuration puis CKEditor
• Modifier le profil Advanced
• Dans la section CSS, sélectionner Define path to ckeditor.styles.js et introduire %t/ckeditor.styles.js
• Cliquer sur Enregistrer

Puis modifier le fichier précédemment copier en vous basant sur l'exemple ci-dessous

 * 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',
    [

           { name : 'Exemple'     , element : 'span', attributes : { 'class' : 'exemple' } }

    ]);
}

Il ne vous reste plus qu'à créer cette classe dans le fichier css de votre thème.