Bonjour à tous,

Ca fait des heures que je trime à essayer de trouver comment faire en sorte qu'un élément html soit différemment stylé selon qu'il est affiché dans la toolbar de CKE ou à l'intérieur même (contenu html) de mon champ textarea
Je m'explique :
Dans mon contenu, j'ai un élément H4 qui doit être impérativement de largeur 300px et aligné à droite. J'ai donc lié une feuille de style personnalisée dans mon fichier config lui même personnalisé
Ca donne donc :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
CKEDITOR.replace( 'mon_textarea', { customConfig : 'config_perso.js' } );
Mon fichier config_perso.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
CKEDITOR.editorConfig = function( config ) {
    config.language = 'fr';
    config.ignoreEmptyParagraph = true;
    config.menu_groups = 'document,basicstyles,paragraph,styles';
    config.resize_dir = 'vertical';
    config.resize_enabled = false;
    config.resize_minHeight = 300;
    config.resize_maxHeight = 300;
    config.height = 300;
    config.entities = false;
	config.toolbar = [
		[ 'Source', 'cleanup', '-','Undo', 'Redo', '-', 'Format', '-', 'FontSize', '-', 'Bold', 'Italic', 'Underline', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BulletedList' ]
	];
    config.fontSize_sizes = '0.75em;1.0em;1.25em;1.5em;';
    config.format_tags = 'p;h4';
    config.shiftEnterMode = CKEDITOR.ENTER_BR;
    config.enterMode = CKEDITOR.ENTER_P;
    config.fillEmptyBlocks = false;
    config.startupFocus = true;
    config.startupMode = 'wysiwyg';
    config.toolbarCanCollapse = false;
    config.contentsCss = './ckeditor/styles_perso.css';
};
Et mon fichier styles_perso.css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
html, body {
	height: 100%;
	width: 100%;
	overflow-x :hidden;
}
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	background-color: #fff;
	font-size: 1em;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	color: #000;
}
 
 
ul {
	font-size: 0.9em;
	width: 210px;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	margin: 0 0 15px 16px;
	list-style-type: circle;
}
 
ul li {
	width: 180px;
	font-weight: normal;
	color: #000;
	font-size: 0.9em;
	margin: 0 0 5px 0;
}
 
ul li a {
	text-decoration: none;
	color: #000;
}
 
ul li a:hover {
	color: #27714e;
}
 
p {
	font-family: 'Trebuchet MS', Arial, sans-serif;
	width: 210px;
	font-weight: normal;
	text-align: left;
	font-size: 0.9em;
	padding: 0;
	margin: 0 0 0 5px;
}
 
p a {
	color: #000;
}
 
p a:hover {
	color: #27714e;
}
 
h4 {
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: bold;
        width: 300px;
        text-align:right;
	font-size: 1em;
	padding: 0;
	margin: 0;
	margin-bottom: 5px;
}
Tout ça fonctionne très bien, SAUF que dans ma toolbar, mon élément H4 hérite lui-aussi de mes styles perso, càd qu'il a une largeur de 300px et et aligné à droite.
Du coup, dans ma combo Format de la toolbar de CKE, mon élément h4 'titre 4' est bien présent (je peux le sélectionner dans la liste) sauf que son étiquette est invisible car carrément barrée à droite au-delà de la largeur de ma combo

J'avais cru comprendre qu'on pouvait styler sa toolbar avec config.stylesSet, donc j'ai ajouté dans mon fichier config_perso.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
config.stylesSet = [
    { name: 'Heading 4', element: 'h4', styles: { 'width': '50px', 'text-align': 'left' } }
];
Mais ça ne marche pas...
J'ai aussi essayé de charger un script externe styles_perso.js (au lieu de les écrire en ligne) dans mon fichier config_perso.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
config.stylesSet = 'perso:../ckeditor/styles_perso.js';
Avec mon fichier styles_perso.js ainsi écrit :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
CKEDITOR.stylesSet.add( 'perso', [	
	{ name: 'Heading 4', element: 'h4', styles: { 'width': '50px', 'text-align': 'left' } }
] );
Mais ça marche pas non plus...

Je précise que je n'arrête pas de vider le cache de mon navigateur (plusieurs fois), rien n'y fait.
Ce n'est apparemment pas non plus une erreur de chemin relatif quand j'appelle mes différents fichiers de config, car les outils de débuggage de firefox et de chrome n'indiquent aucune erreur

Mais où est donc le pb ? ou alors j'ai rien compris à l'utilité de stylesSet ??? CKE c'est vraiment génial, mais quelle usine à gaz !!

Merci d'avance pour votre aide @+