Log in or register to post comments
Last post
stylesheetparser, contentsCss Not working in Google Chrome
Hi
I am using Ckeditor with below code:

CKEDITOR.replace( 'content',
{
extraPlugins : 'stylesheetparser',
contentsCss : 'template1.css',
stylesSet : []
}


Now, my "template1.css" has two styles as below:

H2.Header2, H2{
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
color:#006D50;
}
P.Content, p, ui, li{
text-align:left;
color:#555555;
font-size:11px;
font-family:Verdana, Geneva, sans-serif;
}

In Safari and Google Chrome, styles dropdown is empty.

Do anyone have any idea about this bug in Chrome?

I am using version 3.6.2

Please help.

Thanks
J Thomas
Re: stylesheetparser, contentsCss Not working in Google Chro
I am having the same problem with google chrome and ckeditor 3.6.3. Anyone has got a solution?
Re: stylesheetparser, contentsCss Not working in Google Chro
Working here with chrome. I had a problem in the beginning where some cache was too aggressive and always used an old version of the stylesheet so I had to manually load it with direct url and after that it worked. Also, have you tried simple test styles in your .css file? Have you inspected / checked with firebug that the content is indeed using your stylesheet?
For example the following works in chrome and shows up on the list.

// Review
p.redtext { 
     color:purple;
} 


What I would love to do is to rename it in the list, because it shows up as "p.redtext" and I would much prefer it to see it as "Review" for example.
Re: stylesheetparser, contentsCss Not working in Google Chro
Oh yeah and the plugin seems a bit buggy so do a lot of tests. For example css like this:
p.a { color:red; }
p.b { color:geen; }
p.c { 
 //test
color:blue;
}
p.d {
   color:#555555;
}
p.e {
   color:red;
}
// test
p.f {
   color:#987654;
}
p.g { color:red; }
p.h { color:geen; }
p.i { 
 //test
color:blue;
}


Chrome produces a dropdown with all CSS definitions... except p.f! So your extra selectors for example might be throwing it off. For me when I directly copied your P.Content, p, ui ... it worked just nicely.
Re: stylesheetparser, contentsCss Not working in Google Chro
The first step is to validate that your css is valid.
The comments in CSS are /* */ not // so the browser can parse that file stripping out data.

Testing with http://jigsaw.w3.org/css-validator/#validate_by_input it show that this is the valid info from your sample:
p.a {
color : red;
}
p.d {
color : #555555;
}
p.e {
color : red;
}
p.g {
color : red;
}

but the browser might generate rules like
p.b {} 
p.c {}


And with regards to rename the contents of the dropdown, it would be great if you have some good idea about how to do it.
Re: stylesheetparser, contentsCss Not working in Google Chro
alfonsoml wrote:And with regards to rename the contents of the dropdown, it would be great if you have some good idea about how to do it.


This is getting a little off-topic and I really don't know how you guys prefer doing suggestions but I'll post my suggestions here. Basically, I think there are two ways I would think renaming would be nice to do, depending on which is more convenient for your devs (I haven't tried updating the source myself).
1. Convention
p.sc_Blue_Bla {...} would produce a block rule named "Blue Bla"
span.sc_Scary {...} would produce an inline rule named "Scary"

2. Configuration; perhaps with comments like JSDoc
/**
* @name Blue Bla
* @title Paints the paragraph blue with the Bla font
*/
p.foo { ... } would produce the same block rule as above but with more options if needed

This way would be more work though as parsing the comments would not be as easy as with convetions so I'd go for option 1 because it would simply be easier and most likely faster as well (and using existing code would most likely be easier there).