here's what i've done so far:

1. copied ckeditor.styles.js to my theme folder
2. set the predefined styles path in admin >> settings >> ckeditor >> profile to call the file from my theme
3. edited this file to include my custom styles
4. cleared cache about 20 times

nothing. the custom styles don't show up. in fact, i can't even tell where the custom styles that DO show up are coming from since they don't seem to correspond to any other file i can find.

this is annoying and appears to be a common problem. this was so much easier under fckeditor when you just edited an xml file. can someone - anyone - help me figure this out?

thanks!
debra

Comments

mkesicki’s picture

Priority: Major » Normal
ysaintlary’s picture

Same problem here. Even tried to modify the module's ckeditor.styles.js and nothing happened.
Help!

daggerhart’s picture

There are multiple issues for this problem. Here is the only solution I've found to work out of all those proposed.

http://drupal.org/node/1287432#comment-5515696

kevin.dutra’s picture

Version: 6.x-1.10 » 6.x-1.x-dev
Category: support » bug
Status: Active » Needs review
StatusFileSize
new1.71 KB

I believe the problem comes down to browser caching. I'm going to re-classify this as a bug.

For JS files included via drupal_add_js(), a dummy query string is appended to files to trick browsers into loading a new copy of the file (see drupal_get_js()). This query string is refreshed whenever you clear all caches.

However, the way in which ckeditor.styles.js is included doesn't receive this query string treatment, so clearing the Drupal cache will have no effect on what's happening client-side.

The module actually does apply the query string trick for a number of included files, but ckeditor.styles.js seems to have been overlooked. I've attached a patch that extends this to that file so that when you clear your Drupal cache, you should see the changes reflected in the style dropdown.

This may also what is the cause for #1543970: Changes to ckeditor.styles.js not reflected in 'Styles' drop-down list, which is targeted at the 7.x branch, but I'm not on Drupal 7, so I can't test to confirm.

wheelercreek’s picture

Here's what worked for me using CKeditor 4.2.1 and CKeditor drupal module 7.x-1.13:
1. Create a custom CSS file to hold classes. Mine is called "ckeditor-internal.css" and it's placed into my theme's CSS directory. It just has this:

em.large_italics { 
	font-size:1.3em; 
	font-style:italic;
}

2. Create a small JS file to define the styleSet. Mine is called "ckeditor-styles.js" and is saved to: /sites/all/libraries/ I didn't place it into the ckeditor directory itself, because I don't ever want to overwrite it by updating the library at some point. Here's what my file looks like:

CKEDITOR.stylesSet.add( 'my_styles', [
	// Inline styles.
	{ name: 'Large Italics', element: 'em', attributes: { 'class': 'large_italics' } }
]);

3. Go to the configuration tool for the CKeditor module in Drupal, click to edit the profile you're using - update the CSS file path to point to your CSS file (step 1 above).

4. Last Step: Go down to "advanced options". Add the following lines:

config.stylesCombo_stylesSet = 'my_styles:/sites/all/libraries/ckeditor-styles.js';
config.stylesSet = 'my_styles:/sites/all/libraries/ckeditor-styles.js';

Clear cache, should be good.

W.M.’s picture

Issue summary: View changes

@wheelercreek , Thank you very much..