Force CKEDITOR to refresh config

Question

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.

https://stackoverflow.com/questions/58013460/ckeditor-required-files-does-not-load — jamshid, Sep 19 '19 at 21:04

giammin · Accepted Answer · 2014-09-16T13:55:29.663

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.

edited Sep 16 '14 at 13:55

answered Feb 18 '13 at 17:40

giammin

18,620
8
71
89

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 '13 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? – Jason Parker Nov 20 '13 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 '13 at 08: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 '18 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 '21 at 08:04
This doesnt work for me. I am using CKEditor 4.17. I placed CKEDITOR.timestamp='random_str'; before CKEDITOR.replace and got error c.render is not a function :(( – Tommy Hoang Jul 11 '22 at 03:30

score 3 · Answer 2 · answered Apr 01 '15 at 15:24

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.

answered Apr 01 '15 at 15:24

leymannx

5,138
5
45
48

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 03 '15 at 08:37
@giammin - Of course you remove that when done with development – leymannx Apr 03 '15 at 08:38
this makes sense :D. Anyway I needed a way to refresh browser cache when i deploy new modification – giammin Apr 03 '15 at 08:43
@giammin - Like others said before I also don't think this is a browser cache issue. – leymannx Apr 14 '15 at 09:59

score 3 · Answer 3 · answered Nov 29 '16 at 12:24

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.

score 2 · Answer 4 · answered Oct 19 '16 at 10:53

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.

answered Oct 19 '16 at 10:53

Alfred Armstrong

238
3
9

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 '16 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. – Alfred Armstrong Oct 19 '16 at 12:48
Thanks, this worked for me (using backpack for laravel) – Brynn Bateman Oct 29 '19 at 15:10

score 0 · Answer 5 · answered Feb 18 '13 at 16:11

0

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

answered Feb 18 '13 at 16:11

Bas Tuijnman

237
4
15

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 '13 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? – Bas Tuijnman Feb 18 '13 at 16:21
do you know how CKEDITOR load it's files? – giammin Feb 18 '13 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 – Bas Tuijnman Feb 18 '13 at 16:33
then how can it be possible that a timestamp in the page or in ckeditor.js could change how those files are cached by the browser – giammin Feb 18 '13 at 16:36
1

it is unbelievable that someone +1 your answer. It has nothing to do with my question. – giammin Feb 19 '13 at 09:15

score 0 · Answer 6 · answered Sep 16 '14 at 01:33

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.

answered Sep 16 '14 at 01:33

Nick Zinger

1,174
1
12
28

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 '14 at 08:31
I set it in config.js. So I need to set the timestamp even before ckeditor is included? – Nick Zinger Sep 16 '14 at 13:06
1

in config.js is too late! ckeditor has already loaded its files! you have to set it just AFTER `` – giammin Sep 16 '14 at 13:52

score 0 · Answer 7 · edited Apr 20 '17 at 10:17

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.

edited Apr 20 '17 at 10:17

BartoszKP

34,786
15
102
130

answered Apr 20 '17 at 09:59

Jawwad Ahmed

302
1
10

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

score 0 · Answer 8 · answered Oct 12 '19 at 21:54

0

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

src="/ckeditor_new_one/ckeditor.js"

answered Oct 12 '19 at 21:54

wloges

1
1

score 0 · Answer 9 · answered Apr 20 '21 at 14:44

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.

answered Apr 20 '21 at 14:44

Fenix Aoras

221
3
10

score -1 · Answer 10 · answered Sep 12 '19 at 15:34

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

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

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

HTH

score -3 · Answer 11 · edited May 10 '16 at 10:14

-3

On Firefox:

Go to about:config
Set network.http.use-cache to false

edited May 10 '16 at 10:14

gofr1

15,741
11
42
52

answered May 10 '16 at 09:48

izus

115
5

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 '16 at 13:04

Force CKEDITOR to refresh config

11 Answers11

Linked