37

I created a cms application that use CKEDITOR and when I add some functionality to CKEDITOR I need to refresh some CKEDITOR .js /.css file.

But CKEDITOR force the browser to cache them.

I see that it uses a querystring to all .js/.css files

This querystring reflect the CKEDITOR version I suppose:

/Js/ckeditor/config.js?t=CAPD
/Js/ckeditor/lang/it.js?t=CAPD
/Js/ckeditor/plugins/onchange/plugin.js?t=CAPD

Is there an embedded method to do that in CKEDITOR?

I could not find anything in the documentation. I'm using CKEDITOR 4

The main problem is that when I upload some changes they are not updated by the clients and new functionality are not available or worst case CKEDITOR does not work.

1

11 Answers 11

70

I have found a quite elegant way:

It is enough to set:

CKEDITOR.timestamp='ABCD';

just after you link ckeditor.js or anyhow before ckeditor loads all its files

this is the variable CKEDITOR uses to add timestamp to all .js .css files it loads dynamically.

So every time I change those files I update that variable and browsers will reload them.

6
  • 7
    @Geeo This is the method ckeditor uses to refresh its external files. This variable is intended to do that. So yes, this is elegant.
    – giammin
    May 21, 2013 at 15:26
  • This isn't breaking the cache for me in IE10. Can you post more details? Like where/when to execute this script? Nov 20, 2013 at 23:46
  • 1
    @ClearCloud8 just after the script element when you reference ckeditor.js and before using ckeditor.replace() or ckeditor.inline
    – giammin
    Nov 22, 2013 at 8:36
  • For me this did not work, using ckeditor v4.6 I had to edit ckeditor.js line 5 where it has timestamp:"GAGE" . In my case I was making changes to the templates js file
    – drooh
    Aug 16, 2018 at 19:05
  • I left it empty CKEDITOR.timestamp = ""; and now the query parameter ?t= is not included at all. Thus, you'll have a fresh load of the config each time.
    – nik_m
    Dec 14, 2021 at 8:04
3

For me setting CKEDITOR.timestamp = +new Date works super fine. I wrote it in a JS that will be loaded before any other CKEditor JS will be loaded (see my custom Drupal module).

Now the query that is appended to the custom plugin or custom config JS gets refreshed every time I reload my browser. I guess that might work with custom CSS as well, but I didn't test that.

4
  • 1
    this will always refresh every ckeditor .js . are you sure you want to refresh every single js for every request? they are a lot and it can really slow your page load.
    – giammin
    Apr 3, 2015 at 8:37
  • @giammin - Of course you remove that when done with development
    – leymannx
    Apr 3, 2015 at 8:38
  • this makes sense :D. Anyway I needed a way to refresh browser cache when i deploy new modification
    – giammin
    Apr 3, 2015 at 8:43
  • @giammin - Like others said before I also don't think this is a browser cache issue.
    – leymannx
    Apr 14, 2015 at 9:59
3

Here's what I did to fix it. In your /ckeditor/config.js add this line:

CKEDITOR.timestamp = 'something_random'; 

Update "something_random" every time you have plugin updates.

In your page that uses it, make sure and load the resources like this:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script src="/ckeditor/config.js?v=something_random"></script>

By doing this the config.js will get loaded twice because CKEditor will load it on it's own however it will still work fine, and this should give you the control you need to get an automatic refresh on all browsers. I am a .NET developer, and actually put the /ckeditor/config.js in my bundler, so it gets the version on the querystring automatically, but if you aren't using a fancy bundler, just do what I said above manually with the ?v=something_random.

2

I found a much simpler method, in case anyone is still frustrated by this.

If you open the config file URL with the timestamp appended (eg. ?t=XYZD) in your browser, hard-refresh it, then return to your application page and refresh that, you should get the new version of the config file.

You need to use the same timestamp as is set by ckeditor in the source of the page. If you use developer tools or Firebug, typing CKEDITOR.timestamp into the console will give you the value to use.

3
  • 3
    do you think this is simple to explain to site users? The main problem is that when I upload some changes they are not updated by the clients and new functionality are not available or worst case CKEDITOR does not work.
    – giammin
    Oct 19, 2016 at 11:14
  • I feel your pain. I guess you can either: 1) send them the link to the new config URL and tell them how to do a hard refresh or 2) tell them how to delete their browser cache. Oct 19, 2016 at 12:48
  • Thanks, this worked for me (using backpack for laravel) Oct 29, 2019 at 15:10
0

You could always add a unique timestamp as a variable in your url, or just do a hard refresh (CTRL + F5)

6
  • 2
    the problem is not the page url but the javascript files that ckeditor loads dinamically. I cannot say to every site users to refresh the page
    – giammin
    Feb 18, 2013 at 16:14
  • Why not? When you edit your configuration to add functionality, the browser should detect that the config file has changed and load the new config file from the server. Or do you want to reload the config file because a user added something to the editor during runtime? Feb 18, 2013 at 16:21
  • do you know how CKEDITOR load it's files?
    – giammin
    Feb 18, 2013 at 16:26
  • A quick peek at ckeditor.js (or the html of your page for that matter) learns that it injects the script/css files into the head of your document Feb 18, 2013 at 16:33
  • 1
    it is unbelievable that someone +1 your answer. It has nothing to do with my question.
    – giammin
    Feb 19, 2013 at 9:15
0

The timestamp solution didn't work for me so in case anyone else has the same issue, I appended ?v=date to where I'm including ckeditor.js, and then again inside ckeditor.js where config.js is referenced.

It seems that since config.js is being cached, the new timestamp doesn't get used. At least not until after a few refreshes, but that's not something I can tell my users to do.

3
  • did you set the timestamp just after including ckeditor.js script tag? If you do it after it could be too late
    – giammin
    Sep 16, 2014 at 8:31
  • I set it in config.js. So I need to set the timestamp even before ckeditor is included? Sep 16, 2014 at 13:06
  • 1
    in config.js is too late! ckeditor has already loaded its files! you have to set it just AFTER <script src="/ckeditor.js"></script>
    – giammin
    Sep 16, 2014 at 13:52
0

Add the following code to ckeditor.js

/*Lets Create a random number*/

 function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}
var rString = randomString(4, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

After that substitute the value timestamp:rString in ckeditor.js.

2
  • after development you can remove the randomNumber code. Apr 20, 2017 at 10:12
  • well, yes I did read them, Is something wrong with my suggestion? please correct me if I am wrong. Apr 21, 2017 at 14:28
0

Method wich works is put CKEDITOR with improved config and css files to the new subcatalog:

src="/ckeditor_new_one/ckeditor.js"

0

As this thread is popular, let me share my experience -

I tried @giammin answer, but wasn't working. I ended up changing config.js 's permissions to 664, then it worked like a charm.

-1

This trick works in Firefox for not just CKEditor but for any page on which you want to toggle local caching.

  1. Open Firefox debugging console (F12).
  2. Open console settings (F1).
  3. Enable "Disable HTTP Cache (when toolbox is open)".
  4. Keep console open :)

After a very brief check, I could not find a similar setting in Chrome nor IE.

HTH

-3

On Firefox:

  1. Go to about:config
  2. Set network.http.use-cache to false
1
  • 1
    This is a global solution for a local problem and most likely not applicable at all because the website will not have control over the browser settings.
    – CherryDT
    May 10, 2016 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.