The styles I have been adding/subtracting/modifying in file ckeditor.styles.js are not being reflected immediately in the 'Styles' drop-down list. The following behavior occured for versions 7.x-1.8 and 7.x-1.9.

I copied the file ckeditor.styles.js from modules/ckeditor/ and placed it in themes/[theme-name]/
Changes to the file in either location don't result in immediate changes in the 'Styles' drop-down list, despite 10-20 clicks of 'Clear All Caches' and Admin->Appearance. However, every once in a long while the changes appear. When I try to replicate recent steps taken before the changes, they haven't succeeded, so I have no idea what caused them to work every once in a while.
The 'Styles' drop-down list is different for different pieces of content. Some nodes I created months ago have different choices in the 'Styles' drop-down list than nodes I'm currently working on, although neither reflect the changes to ckeditor.styles.js I've made today.

CommentFileSizeAuthor
#32 Screen Shot 2015-12-29 at 11.45.44 AM.png125.59 KBja09
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Mark_L6n’s picture

Title: ckeditor.styles.js » Changes to ckeditor.styles.js not reflected in 'Styles' drop-down list
Mark_L6n’s picture

Looks like this could be an interaction with HTML purifier. I cleared the HTML purifier cache and checked that the library is up to date, but am finding the following log messages:

LOCATION	http://[url]/ckeditor/xss
REFERRER	http://[url]/node/53/edit?render=overlay
MESSAGE		Notice: Trying to get property of non-object in _htmlpurifier_process_text() (line 245 of [drupal path]/sites/all/modules/htmlpurifier/htmlpurifier.module).
SEVERITY	notice

LOCATION	http://[url]/ckeditor/xss
REFERRER	http://[url]/node/53/edit?render=overlay
MESSAGE		Notice: Undefined variable: langcode in _htmlpurifier_process() (line 149 of [drupal path]/sites/all/modules/htmlpurifier/htmlpurifier.module).
SEVERITY	notice

LOCATION	http://[url]/ckeditor/xss
REFERRER	http://[url]/node/53/edit?render=overlay
MESSAGE		Warning: Missing argument 5 for _htmlpurifier_process(), called in [drupal path]/sites/all/modules/ckeditor/includes/ckeditor.page.inc on line 241 and defined in _htmlpurifier_process() (line 148 of [drupal path]/sites/all/modules/htmlpurifier/htmlpurifier.module).
SEVERITY	warning

LOCATION	http://[url]/ckeditor/xss
REFERRER	http://[url]/node/53/edit?render=overlay
MESSAGE		Warning: Missing argument 4 for _htmlpurifier_process(), called in [drupal path]/sites/all/modules/ckeditor/includes/ckeditor.page.inc on line 241 and defined in _htmlpurifier_process() (line 148 of [drupal path]/sites/all/modules/htmlpurifier/htmlpurifier.module).
SEVERITY	warning
mkesicki’s picture

@Mark123 thank you for notice this . We will check this as soon as possible.

bright8’s picture

@Mark123 Did you also clear your browser cache? I have also been tweaking styles in ckeditor.styles.js and found I need to clear the browser cache as well in order to get the changes to show up. It might be that your browser is caching the old styles for each node...
I'm also seeing errors related to CKEditor and HTML Purifier and will post those as a separate issue.
Hope this helps!

Elder Brother’s picture

Version: 7.x-1.9 » 6.x-1.11

Encountering the same issue with 6.x-1.11.

ckeditor.styles.js copied to current theme folder, all default styles removed and two custom ones added, profile set to use theme copy, original in module folder temp. removed to make sure, html filter and corrector both unchecked, all page caching and css optimisation unchecked under performance settings. Cleared cache multiple times.

Original styles from default ckeditor.styles.js still show (albeit now in a jumbled order) and I can only get one of my custom styles to show.

Style drop-down empty only when I remove the theme copy of ckeditors.styles.js - but all styles return when file replaced (though they are still no longer in the file).

There is clearly some very stubborn caching occuring somewhere..

soulfroys’s picture

Version: 6.x-1.11 » 6.x-1.x-dev

Same here with last 6.x-1.x-dev... :(

mkesicki’s picture

Version: 6.x-1.x-dev » 7.x-1.9

@Elder Brother, @soulfroys,
please stop changing module version where the problem occurs.
Ticket was added to 7.x-1.9 version so it should stay.
If the problem exists also in 6.x version please add new topic and link it here (also this ticket in new one).

soulfroys’s picture

I feel stupid now. Sorry about that...

mkesicki’s picture

@soulfroys,
there is no reason to feel stupid :). But changing module version all the time may confuse users.

soulfroys’s picture

Do not worry about it: we use that expression a lot here in Brazil (that's why my English sucks) and for almost all situations... lol

There are multiple issues for this problem, I had posted on one of them and I forgot...

Brazil loves Drupal!!!

GBurg’s picture

I have the same problem.

I use js CKEditor 3.6.4 with module version 7.x-1.9 and drupal version 7.15 .

I changed in the full profile (only ckeditor profile I use) that it should use the theme.css (which works) and the theme ckeditor.styles.js . My styles dropdown is empty, while I copied everything in the right file. This is clearly not working well:

Define the location of the ckeditor.styles.js file. It is used by the Style drop-down list available in the default toolbar. Copy the sites/all/modules/ckeditor/ckeditor.styles.js file into your theme directory (sites/all/themes/neeltjedesign/ckeditor.styles.js) and adjust it to your needs.

GBurg’s picture

I did some more resource. I changed all titles from the style Computer Code to respectively:

Computer default in the ckeditor styles config file in the library
Computer module in the ckeditor styles config file in the module
Computer theme in the ckeditor styles config file in the theme

Turned out that the Module config was used. So I edited it (in several ways) Nothing happened. Clearing caches of browsers and drupal. Nothing happened. Removed the whole library, cleared caches, reloaded page and uploaded whiole library again, clearing cahes, reloaded page. Nothing happened.

I went to see a youtube video, and reloaded the page again... It was there! So somehow there is a very annoying caching going on, that makes your changes have effect like 30 minutes later?!

edubacco’s picture

someone has achieved removing styles from the drop down styles menu?
if yes, how?
thanks

reallyordinary’s picture

So... this hasn't been fixed? I have the latest version of this module and CKEditor and this is still happening. I can't add custom styles. Really limits the functionality of the module.

mcfilms’s picture

I am having the same issue: the Styles drop-down is blank. Here is what I have done and what has not fixed it:

I had the ckeditor.styles.js in the correct place and I set the path to it. I actually st the full path (not a relative path.) I got the blank drop-down for styles.

I cleared the custom path, and reset Predefined styles to Use theme ckeditor.styles.js

I cleared all caches on the site. I cleared my browser cache. I visited a content page that had the ckeditor in use. Once again this was a blank drop down menu.

This was on Firefox, so I also tried it on Chrome. I also checked the ckeditor.styles.js and changed from 644 to 755 (although that shouldn't matter). None of this made a bit of difference.

I'm at a loss as to what to do next. I think I will try the WYSIWYG module and see if it handles this better.

mcfilms’s picture

P.S. Not sure if this will help troubleshoot the issue, but I did note that on the WYSIWYG module page this comment:
http://drupal.org/user/757970

It seems the developers of the ckeditor javascript package switched from using single quotes to double quotes in the js files. Maybe this is why however you edit ckeditor.styles.js it does not get seen.

Red Sky Tom’s picture

I to have had the exact same issues with styles and CSS not showing after adding my own. I am not sure if clearing my browser cache will work but will give it a try but the one thing that works for me everytime is renaming the js file and then changing the name in the settings will show the new styles right away. Definitely a pain and would love to see a better solution.

syngi’s picture

I can confirm the issue with module version 7.x-1.13 and ckeditor version 4.1.2. The styles dialog does not update to changes in the ckeditor.styles.js (to which the path is customly set in the module CSS settings).
Clearing or disabling the cache of the browser or clearing Drupal's cache has no effect. Moreover testing with another browser also shows the old styles content. So this must be stored in the database or filesystem somewhere. Although I could not find the ckeditor.styles.js content in my database export.
Only renaming or moving the ckeditor.styles.js file makes the styles to update immediately.

mfuggle’s picture

I am using Drupal 7.23, CkEditor module 7.x-1.13 and CKEditor 4.2.1 and am having the same issues. No matter what changes I make they do not get reflected in the Styles drop down. I have been through similar diagnostics as stated above with the same results. This is a significant issue for sites that need to place control over content editors who do not have well developed computing skills and need to be tightly controlled.

Not sure whether this issues lies in the Drupal Module or CKEditor itself and have not had the time to be able to diagnose to that extent.

Cheers
Martin Fuggle

syngi’s picture

.. so since only changing the name works I now just added '?v=1'. Didn't think of this before, but this currently is the easiest work-around.

marcvangend’s picture

Thanks syngi, that's a good workaround, even though it shouldn't be necessary.

rrotari’s picture

Issue summary: View changes

Just found how this should be done the right way.
First go to:
configuration>ckeditor>profiles>'your profile'>css
at 'Predefined styles' chose 'define path to ckeditor.styles.css' and at 'Predefined styles path' chose your path.
ckeditor.styles.css should not be in ckeditor module because it will be overwriten at next update.

no cache removal is needed when changes are done

marcvangend’s picture

rrotari: I think that is not the point of this issue. You are right that that is the correct way to set the styles file. However if you change the styles file after that, your changes may not show up in the editor. That's the real problem, and that's what the workaround in #20 tries to tackle.

rrotari’s picture

marcvangend: you're right, i had false impression that it worked

duncan246’s picture

Using CKEditor v.4, CKEditor module 7.x-1.13.

This comment (on a Drupal 6 thread) worked for me: https://drupal.org/comment/8234491#comment-8234491

Soleno’s picture

@syngi - thanks a lot for your workaround in #20!

Sutharsan’s picture

I can confirm that the editor styles list is not updated due to the browser cache. Check the file loaded by your browser and you will see it is not updated. Clear the files of your browser cache and the changes will be reflected in the editor's styles dropdown. My workaround is use one browser with disabled cache for development tasks like this.

Leo Pitt’s picture

Note that the end of line format for ckeditor.styles.js is UNIX. If you create a new file called "ckeditor.styles.js" on a windows machine, the EOL format will probably be WIndows/DOS - and it appears that CKeditor can then no longer read it.

I use notepad++ for my development, and was having the problem above, whereby CKeditor would refuse to recognise my styles, regardless of browser and Drupal cache settings. I noticed that my ckeditor.styles.js file was using Windows/DOS EOL format. Changing it to UNIX EOL format fixed the problem.

Some info on UNIX v Windows EOL: http://www.cs.toronto.edu/~krueger/csc209h/tut/line-endings.html

selinav’s picture

How do you do in notepad++ to change in unix eol format?

marcvangend’s picture

selinav: Simply entering that question in Google would have given you the answer much sooner than waiting for me :-) This one, for instance: http://stackoverflow.com/a/8195860/241546.

caxy4’s picture

+1 for the issue being due to browser caching.
Thanks for the suggested workaround @Sutharsan!

ja09’s picture

Version: 7.x-1.9 » 7.x-1.16
FileSize
125.59 KB

This was very frustrating. I can confirm copying ckeditor.styles.js to the theme folder and selecting "Use theme ckeditor-styles.js" on /admin/config/content/ckeditor/edit/ckeditor still does not work, years later.

Can also confirm that renaming the file and choosing choosing "Define path to ckeditor.styles.js" on /admin/config/content/ckeditor/edit/ckeditor does work.

However, #20 didn't work for me. Renamed it to ckeditor-styles.js

Screenshot attached of the working settings. Using Drupal 7.41, CKEditor 7.x-1.16 and library v4.3.2. Updated the version on this ticket.

I have no issues with browser or Drupal caching. Don't believe that has anything to do with the root problem here.

Hope this saves someone else's frustration.

filnug’s picture

I found my solution here:
http://www.drupalden.co.uk/adding-custom-ckeditor-styles-getting-them-show

The process is well describe and most important is the last paragraph!

As said in #20, there is a problem with the cache. The solution is:
1. go to /admin/config/content/ckeditor and edit your profile
2. in css section, select Define path to ckeditor.styles.js
3. in the Predefined styles path, add your path "/sites/all/themes/mytheme/ckeditor.styles.js?v1" adding that damn ?v1 at the end

jcisio’s picture

Status: Active » Fixed

It's obviously a caching problem. Mark it as fixed as we don't have a clean cache invalidating solution right now.

hass’s picture

Status: Fixed » Active

Huh? There is a cache invalidation key in ckeditor. This module implemented also a Drupal way in past. Than we need to fix the caching bug.

hass’s picture

hass’s picture

Status: Active » Closed (duplicate)