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 ?
Re: including css problems
And the style sheet parser users only rules composed of an element and a class
Re: including css problems
If I undestood well, this line should remove the style to the body (and thus the background) :
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 ?
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.
Re: including css problems
I made your modification and the class .error_msg appears well in the drop-down menu.
Thank you for your help.