Ckeditor: comment ajouter ses CSS perso ?

Fonctionne avec CKeditor 4.2.1 et CKeditor 7.x-1.13  +   CKEditor 7.x-1.16 (et lib ckeditor 4.4.5)

Personnaliser la barre Styles

Créer ces 2 fichiers avant de configurer la partie Options avancées de admin/config/content/ckeditor/edit/Full

1. par ex, "ckeditor-internal.css" ou "css/ckeditor.styles.css" dans son dossier thème (et à ajouter dans le .info)
    et qui comporte par ex: em.large_italics { font-size:larger; font-style:italic; }

2. /sites/all/libraries/ckeditor/ckeditor-styles.js   (un ex est en PJ) au format JSON

3. admin/config/content/ckeditor/edit/Full  -  partie Options avancées:

config.stylesCombo_stylesSet = 'my_styles:/sites/all/libraries/ckeditor/ckeditor-styles.js';
config.stylesSet = 'my_styles:/sites/all/libraries/ckeditor/ckeditor-styles.js';

Notes:

1. pour le test (conf multi site, sous-site tran2) le thème utilisé est corporateclean 7.x-2.3 et /gandi/sites/all/themes/corporateclean/ckeditor-styles-tra.js
2. il y a un bug de cache ici. Il vaut mieux donner pour chemin de ckeditor-styles.js  la chaine %tckeditor.styles.js?v1
   %t récupère le thème actif, et en changeant v1 par v2 (et vider cache) on est assuré que drupal verra la modif.

Voir les styles lors de l'édition

La technique précédente permet d'ajouter ses classes, pas de les voir quand on les applique. Pour cela, il faut que ckeditor charge notre feuille de style.

Le fichier qu'on cherche est /sites/all/libraries/ckeditor/contents.css. Ajouter le contenu de ce fichier dans son ckeditor.styles.css (nommé ckeditor.styles.css pour garder l'asso avec le .js ) et le personnaliser (ie y copier ses styles qu'on a mis dans le .js).

Conf du profil CKEditor (admin/config/content/ckeditor/edit/Full) partie CSS :

• liste "CSS de l'éditeur" à "définir une CSS" ;  puis mettre la valeur (Chemin vers le fichier CSS) %tckeditor.styles.css?v2
• liste "Styles prédéfinis " à "définir le chemin"; valeur %tckeditor.styles.js?v3

Puis, configurer ACR.

Plus sur le web

Plus à http://chipcullen.com/how-to-apply-classes-ckeditor-4-in-drupal-7/

http://www.willhallonline.co.uk/blog/using-ckeditor-styles-drupal
donne cet exemple pour Omega, où on peux appliquer un style de grille via div (image dans la div) :
{
  name : 'Left Image',
  element : 'div',
  attributes : {
        'class' : 'alpha grid-3 image-grid-caption'
  }
}

image-grid-caption est une classe créée à cet effet.

http://www.aglobalway.com/content/drupal-ckeditor-configuration-work-bootstrap-theme

http://alvinalexander.com/drupal-code-examples/drupal-7-ckeditor-project...