Discussion :

[Bioteck]

Bonjour !

Je suis en train de développer un back-office pour le site d'un client et j'y ai intégré l'éditeur CKEditor 3.0.1 pour lui faciliter la modification des contenus du frontal.
Je souhaite appliquer les styles du frontal au contenu de CKEditor afin que le rendu soit le même entre les deux. En gros je souhaiterais passer de ça :



... à ça :




Pour ce faire, j'ai intégrer le fichier CSS du frontal à CKEditor en ajoutant la ligne de code suivante dans le fichier config.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

CKEDITOR.config.contentsCss = ['/package/ckeditor/contents.css', '/css/style.css'];

Et j'ai modifié le fichier CSS contents.css de CKEditor ainsi :

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
/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
 
/*body
{
	/* Font *
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
 
	/* Text color *
	color: #222;
 
	/* Remove the background color to make it transparent *
	background-color: #fff;
}*/
 
body
{
	width: 980px;
	height: auto;
	background-color: #1b1b1b !important;
}
 
html
{
	/* #3658: [IE6] Editor document has horizontal scrollbar on long lines
	To prevent this misbehavior, we show the scrollbar always */
	_overflow-y: scroll
}
 
img:-moz-broken
{
	-moz-force-broken-image-icon : 1;
	width : 24px;
	height : 24px;
}
img, input, textarea
{
	cursor: default;
}

Le rendu est impeccable. J'ai réussi à obtenir exactement ce que je voulais.
Le souci c'est que j'ai ça aussi :



Les styles de la toolbar s'en sont aussi vu modifiés comme vous pouvez le constater

Pourtant, les fichiers CSS sont bien inclus dans le head de l'iframe représentant le contenu de l'éditeur, comme on peut le voir dans cette capture de Firebug (encadré en vert) :

... et ceux-ci ne devraient donc agir que sur les éléments dans l'iframe en question. La toolbar étant totalement externe à cette iframe, je ne vois pourquoi ça fait ça.

Quelqu'un aurait-il une solution pour résoudre ce problème ? Ou au moins une explication... Merci

[yan_vn]

Bonjour,

Je pense que c'est le comportement normal que d'afficher dans le menu les styles tels qu'ils seront appliqués... Du moins c'est ce que j'avais avec l'ancienne version FCKEditor 2.6 et c'est ce qui me convient!

Merci aussi pour l'info sur la config car je cherchais comment faire et je trouve que la doc de CKEditor est encore un peu réduite pour l'instant.

En tous ce soft est vraiment super!

Bonne continuation pour tes projets.

Yannick.

[yfrommelt]

Essai juste de changer la class de la zone de saisie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.cke_contents{background-color: #1b1b1b;}

source : http://dev.fckeditor.net/ticket/5047