[solved] including css problems

Hello,

I want to add my css stylesheet to the dropdown style menu of the CKEditor.
So I read this page : http://docs.cksource.com/CKEditor_3.x/D ... ide/Styles

This my HTML content :

<textarea class="ckeditor" name="mycontent"></textarea>
<script type="text/javascript">
  CKEDITOR.replace( 'mycontent');
</script>

This is the content of my config.js :

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/styles.css';
config.stylesSet = [];
config.stylesheetParser_skipSelectors = /(^body)/i;

and this is the content of my css file :

body{
    margin: 0px;
    background: #1a3749;
    background-image: url(/images/admin/background1.jpg);
    background-repeat: repeat-x;
}
.error_msg{
    color: #ce0f0f;
    font-weight: bold;
    font-style: normal;
}

The problem is that the texte area of the editor as the background image (it shouldn't have it because I excluded it in the config.js file) and the style .error_msg isn't display in the dropdown menu.

Does anybody know what I am doing wrong ?

Thu, 03/01/2012 - 15:49

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: including css problems

I don't see want you have done to avoid the body background

And the style sheet parser users only rules composed of an element and a class

Thu, 03/01/2012 - 18:19

shaolin

Joined: 01/03/2012

Posts: 3

Re: including css problems

Thank you for your reply.

alfonsoml wrote:I don't see want you have done to avoid the body background

If I undestood well, this line should remove the style to the body (and thus the background) :

config.stylesheetParser_skipSelectors = /(^body)/i;

alfonsoml wrote:And the style sheet parser users only rules composed of an element and a class

I am not sure of what you mean. In my style sheet body and .error_msg are element and class.

Is there a full example of linking an external css to CKEditor somewhere ?

Thu, 03/01/2012 - 19:50

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: including css problems

You are mistaken about these features:

contentsCss is the stylesheet that you want to use for the contents. Whatever you put there will be linked in the document and used. You have specified a background image for the body, so that image is being shown.

The stylesheet parser plugin on the other side, reads the contents of such stylesheet in order to create the entries that will be shown in the Styles dropdown. But due to the way the Style system works in CKEditor, it requires BOTH an element name AND a class IN THE SAME RULE.

So ".error_msg" will be ignored because it doesn't specify the element that must be used, you have to specify a rule like "div.error_msg" so the system understands which element you want to handle and then apply/remove that class on it.

Thu, 03/01/2012 - 20:19

shaolin

Joined: 01/03/2012

Posts: 3

Re: including css problems

Ok I understand.
I made your modification and the class .error_msg appears well in the drop-down menu.
Thank you for your help.