Il est possible de personnaliser la liste des style de l'éditeur html, sans cela, cette liste n'est pas très utile.
Hormis l'activation ou non de certains boutons de l'éditeur via le manage, toutes les autres personnalisations se font via le fichier javascript media/fckconfig/myconfig.js.

Pour modifier la liste des styles, y coller ces 2 lignes :
FCKConfig.EditorAreaCSS = '/media/fckconfig/myownstyles.css' ;
FCKConfig.StylesXmlPath = '/media/fckconfig/fckstyles.xml' ;

Ensuite ajouter les fichers myownstyles.css et fckstyles.xml dans /media/fckconfig/
fckstyles permet de personnaliser la liste des styles de liste déroulante.
myownstyles permet de personnaliser l'affichage de ces styles dans la liste déroulante ainsi que dans l'éditeur via des css.
Voici un exemple de ces 2 fichiers
fckstyles.xml :

 
<?xml version="1.0" encoding="utf-8" ?>
  <Styles >
  <Style name="Normal" element="p"/>
  <Style name="Titre 2" element="h2" />
  <Style name="Titre 3" element="h3" />
  <Style name="Couleur page" element="span">
    <Attribute name="class" value="couleur_page" />
  </Style>
    <Style name="Couleur rouge" element="span">
    <Attribute name="class" value="couleur_rouge" />
  </Style>
  <Style name="Couleur verte" element="span">
    <Attribute name="class" value="couleur_vert" />
  </Style>
</Styles>
 

myownstyles.css :

 
.couleur_page{color:#0000BB;}
.couleur_rouge{color:#CC0000;}
.couleur_vert{color:#00CC00;}
 

Il est possible via le fichier myconfig.js de faire plein d'autres modification à condition de maitriser le fckeditor. Plus d'info sur http://www.fckeditor.net/.

Attention toute modification de la barre d'outil via le manage écrasera le fichier myconfig.js.

Merci Vincent, je ne savais pas que le fichier de config était accessible.

Est-ce que quelqu'un a essayé de faire ca avec nouvelle version ckeditor que l'on a avec la 1.7 ?

Suite du monologue :

Après 2 heures de recherche, voici comment faut faire.
Depuis la 1.7, le fichier emajine servant à la configuration de ckeditor ce nomme myconfigCk.js, il se trouve comme avant dans media/fckconfig/

Il faut ajouter 2 lignes pour personnaliser la liste des styles et les css de l'éditeur

//Configuration auto-généré sur le FTP
CKEDITOR.editorConfig = function( config ){
config.toolbar_barre_par_defaut =[['Source','PasteText','Undo'],['Styles','Bold','Italic','Underline','RemoveFormat'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['NumberedList','BulletedList'],['AddEmjImage','AddEmjRessourceLink','AddEmjRubric','Link'],['Table','TableMergeCells','TableHorizontalSplitCell','TableInsertRowAfter','TableDeleteRows','TableInsertColumnAfter','TableDeleteColumns','TableInsertCellAfter','TableDeleteCells']];
...
}
 

ligne à ajouter avant la fin de l'accolade :

config.contentsCss = '/media/fckconfig/my_styles.css' ;
config.stylesSet = 'my_styles:/media/fckconfig/my_styles.js';

 

Le fichier style css est le même que celui cité précédemment (j'ai juste changé le nom).
Le fichier my_styles.js contient les styles qui seront ajoutés à la liste des styles.

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block Styles
    { name: 'Normal', element: 'p'},
    { name: 'Titre2' , element: 'h2'},
    { name: 'Titre3' , element: 'h3'},		

    // Inline Styles
    { name: 'Marron', element: 'span', attributes : { 'class' : 'couleur_marron' } },
    { name: 'Mise en avant', element: 'span', attributes : { 'class' : 'mise_en_avant' } },
]);

Voili voilou.

Plus d'info sur http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

Attention, il ne faut pas oublié de vider son cache entre chaque modification :)

Bon weekend

Très pratique, merci Vincent !

Salut

Juste un grand merci à Vincent (encore !) pour cette astuce.
J'ai mis en place des styles de couleur personnalisés en quelques minutes...

Est-il possible également de modifier les paramétrages par défaut de l'éditeur?
Lorsque l'on crée un paragraphe, par défaut l'éditeur sélectionne le "text-align : left".
Peut-on paramétrer par exemple le "text-align : center" pour chaque nouveau paragraphe crée.
Peut-on le faire à partir du fichier my_style.js ?

Bonjour,

C'est au niveau des css qu'il faut centrer (sur le p).

Oui cela me parait plus indiqué, comme ça tu peux intervenir plus facilement sur la mise en page si cela devait changer...

Est-il possible également de modifier les paramétrages par défaut de l'éditeur?
Lorsque l'on crée un paragraphe, par défaut l'éditeur sélectionne le "text-align : left".
Peut-on paramétrer par exemple le "text-align : center" pour chaque nouveau paragraphe crée.
Peut-on le faire à partir du fichier my_style.js ?

ok merci.
C'est ce que j'avais modifié dans un premier temps mais je pensais qu'on pouvait le faire autrement.

Tu veux en fait modifier pour que tous les P soient en alignement centré ?
C'est bien utile de le faire en CSS sur le site, surtout que la config perso CKEditor peut être écrasé assez facilement...

Pour être très précis, mon client veut que par défaut ses blocs texte soient en "justify".
Donc ça c'est effectivement en css que je peux le faire.
Mais s'il veut pour une raison mettre un certain paragraphe en "align: center", via son éditeur, il ne le pourra donc pas puisque dans le css "text-align : justify" est appliqué. C'est pour cette raison que je voulais l'appliquer à l'éditeur par défaut.

Sauf erreur, si on applique un style via CKEditor en center (donc avec un style="text-align: center" sur la balise), cela écrasera la propriété définie en CSS...

Tu as raison seb si on applique dans l'éditeur un text-align : center ou un text-align :right, cela écrase le text-align : justify du css.
Par contre en appliquant un text-align: left, cela n'est pas pris en compte.

Normalement en définissant un alignement par défaut dans l'éditeur, si on sélectionne un autre alignement, il ajoute dans le html. Dans ton cas, l'alignement par défaut doit être gauche, dans ce cas là si tu sélectionnes gauche, il n'ajoute rien dans le code.

Il faut jouer dans le fichier css de ckeditor my_styles.css, dedans tu fais un p ... justify, normalement ensuite par défaut ça sera justifié, et si tu cliques sur gauche, il ajoutera la balise dans le html. Attention pour toute manip sur ckeditor, il faut bien penser à vider le cache et réactualiser.

Super ça marche.
Merci Vincent.
Je vais encore t'embêter.
tu crois que l'on peut également dans l'éditeur sur le bouton lien (onglet cible cible->target) choisir le select par defaut "_blank" et non "non-defini".

je ne sais pas si c'est possible, mais je ne le conseillerais pas car ce n'est pas valide xhtml (c'est un détail).