Setting config.stylesSet in Custom javascript configuration has no effect

To add your style to style drop down / select box please use "Predefined styles " and/or "Predefined styles path " options from CKEditor's profile configuration ("CSS" tab). Styles should be defined in JavaScript file. Please read description of those options in profile configuration. If you have more question please ask.

Am I not able to use a css files.

I'm completely confused.

Perhaps someone could help me out here if I post some of the code I have?

Below is the code I want to to show in the drop down. What is it that I have to do for that CSS to show up?

div.alert {
  margin: 10px 0;
  padding: 10px 15px 10px 80px;
  color: #333333;
  border-top: 1px dashed #FEC201;
  border-bottom: 1px dashed #FEC201;
  background: #FFEDB5 url(../images/alert.png) 15px 50% no-repeat;
}

Would it look like this?

config.stylesSet = [
    { name : 'CSS Style', element : 'span', attributes : { 'alert' : 'div.alert' } }

I'm having trouble with this too; I just posted on IRC:

<du> it seems like ckeditor isn't acknowledging the different ckeditor.styles.js file I'm specifying, - I can edit the default one and the changes get picked up - but that's it. I'm trying to have two different text formats with two different ckeditors and two different sets of styles

I have also tried adding styles, as the initial starter of this thread did, with no success. To me, it seems like you can either add your styles to the ckeditor.styles.js in the module directory or ... have nothing. I've been poking around and doing a little debugging, trying to narrow the problem down, and there are indicators that support this.

I've:

• Tried defining path to ckeditor.styles.js in several different ways, using the tokens, without the tokens, root relative paths, absolute URLs, pointing to an alternative file in the module directory, and pointing to a file in the theme directory - no success
• I've also tried looking at the CKEditor API and seeing if I may manually specify the styles in the Custom Javascript Configuration but have had no success, some of these may be syntactically incorrect (sp?) but it shows you what i've tried:
  • CKEDITOR.addStylesSet( 'drupal', [ { } ] ); /* this will edit the styles; but all of the styles */
  • CKEDITOR.addStylesSet( 'custom', [ { } ] ); CKEDITOR.config.stylesSet = 'custom'; /*changed all style dropdowns (now can't reproduce) */
  • config.addStylesSet( 'custom', [ { } ] ); config.stylesSet = 'custom';
  • ... I've tried an exaustive amount of things...

Predefined Styles

Finally figured out by analyzing the CKEDITOR object in FireBug. If you add the following code to the "Custom JavaScript Configuration" it will load up different styles.

  config.stylesCombo_stylesSet = 'name:/path/to/styles.js';
  config.stylesSet = 'name:/path/to/styles.js';

Here's a breakdown of how that code works, or at least the parts you'll (you, the user (not module developer)) need to change.
"name" is the name of a set of styles added via CKEDITOR.addStylesSet( ..., example:

    CKEDITOR.addStylesSet( 'mynewstyles',
    [
     { name : 'My First Style', element : 'h2', attributes : { 'class' : 'subheading' } }
    ]);

This is similar to the default one, except, "drupal" is the default name.

Update: even though I was successful in accomplishing what I wanted, the forms on the CKEDITOR edit page do not appear to work correctly. Adding a path to different styles doesn't seem to make a difference.

@seancr's suggestion worked like a charm for me.

All of these other suggestions had my .js file loading properly, but I'd get a "Uncaught TypeError: Cannot read property 'length' of null" and the styles wouldn't appear. This was with the default styles copied into my own file.

sorry, different version

I have been trying to change the content of the Style list in CKEditor for a couple of hours, the only solution that works so far has been to change the ckeditor.js file, which is not ideal. I am a noob to CKEditor, if someone could explain in a bit more detail that would be great as I don't understand what seancr is doing that is making this work. I have tried adding

  config.stylesSet = 'custom:http://localhost/drupal7/sites/all/js/editorstyles.js';
  config.stylesCombo_stylesSet = 'custom:http://localhost/drupal7/sites/all/js/editorstyles.js';

to config.js in the root folder of the ckeditor library but this has no effect. As i mentioned the only thing that actually changes the style is changing it in the main config file, then every time I upgrade to the new library I will have to do it all again. I know that the my style.js file works because when I make the change in ckeditor.js it works exactly as I want it to. I am desperate for any assistance as this is driving me crazy. thanks.

Ckeditor CSS predefined styles STILL do not work "at least in chrome" with the styles.js file provided in the latest dev version.

Uncaught TypeError: Cannot read property 'length' of null

Figured it out. This error is if you try to use styles.js from the library instead of the MODULES ckeditor.style.js!

@sgriffin, I don't totally follow but I'm still having issues related to this. Can you post the relative paths that should and should NOT be used to reference ckeditor.style.js? Thanks so much!

Copy and upload the styles.js from the ckeditor module folder to your theme folder... Not the styles.js from the download of ckeditor.

Hi

I had a similar issue but wanted the customer styles to be content editable via the JS injector module.
The solution was to define the path to the ckeditor.styles.js like this:
%hsites/default/files/js_injector/js_injector_3.js

Then start a JS injector rule (#3) like this:
if (typeof (CKEDITOR) !== 'undefined') {
CKEDITOR.addStylesSet( 'drupal',
[
/* Block Styles */
{ name: 'Demo: Info Description', element: 'div', attributes : { 'class' : 'infodescription' } },
{ name: 'Click for More', element : 'div', attributes : { 'class' : 'showcontent' } }

]);
}

My custom styles are now about 40 long allowing for tables, images, lists etc
hope this helps.

Oh god, sgriffin, you totaly nailed it in #10 and #12. Thanks alot for that info! I've been riping my hair out on this one!

This is still an issue. Using CKEditor 4.4.7 (using the libraries module with a local version of CKEditor, not CDN linked one(default since version 7.x.-1.14)) and the CKEditor Drupal module, version 7.x-1.16.

After quite some debugging because my changes were not reflected in the styles dropdown I started to search for the terms "Marker" & "Yellow" which are kind of unique in my Drupal installation ... but they still showed up even after removing all the styles in the styles.js file (CKEditor JS library in sites/all/libraries) and in the ckeditor.styles.js file in the module directory (sites/all/modules/contrib/ckeditor).

The styles.js from sites/all/libraries which I copied before contained only two predefined styles but was for some reasons empty, depending on the configuration of the CSS settings of CKEditor (I assume it was when I specified the direct path to the file). When I used the default settings the dropdown still contained all the predefined styles.

So I searched in the filesystem for those terms (before mentioned, marker & yellow) but could not find those in the CKEditor context. So it was obviously not delivered from the filesystem. Clearing the caches with drush (dr cc all) plenty of times and truncating the DB cache tables did not change anything.

So I started with clearing the browser cache and renaming the files. This finally worked for me. And I copied the styles.js from the CKEditor lib download, not from the module directory.

I copied the ckeditor.styles.js to my theme folder from the CKEditor module, but without luck.
But fortunately renaming the file clearing the browsers cache as mentioned by 4aficiona2 in #15 worked!