2009/11/14

Controlling the cache with CKEditor

One of the biggest problems that are faced while developing some javascript code in an app like CKEditor is the browser cache as it doesn't behave like you want to in those time.
Usually the cache is great, it can be very helpful to avoid long delays loading again the shared files, but if it insists on loading the old version instead of the new one that you have just changed then it will be painful.

Depending on the browser that you are using and its configuration it can be easier or harder to force loading the new version. and the last resort is to close the browser, load about:blank and clear the cache, now it should really load the new version (unless there's some proxy between you and the server that doesn't want to cooperate).

With CKEditor 3 there's a new option to solve this problem, "CKEDITOR.timestamp"
Its main use is a way to signal to your users the version of CKEditor, because they will have even greater problems trying to clear the cache. Each new release of CKEditor will have a different timestamp, so the users will load the new version of the files.

You can also this item while you are trying to develop some plugin. You just need to make sure that every time that the page is loaded a new timestamp is generated. A typical way to do it is (before creating your instances):

CKEDITOR.timestamp = (new Date()).toString() ;

But there's one gotcha here. That string is appended to every url in order to make it unique, and at least there's one place where using that will cause a little problem:
If your plugin is providing an icon for a custom button and you use that timestamp you won't see it in the toolbar, instead you'll get the first icon of the toolbar strip. This is due to the fact that such icon is loaded as a background image for the element, and the url that it's generated isn't valid and won't be used.
The workaround is to make sure that it doesn't contains anything that can cause problems:

CKEDITOR.timestamp = (new Date()).toString().replace(/[ \(\)\+]/g, "");

Of course you can use any other way to generate the random string that doesn't have this problem from the start, but I'm too used to just put the date whenever a unique url is required.

Update:

I knew that my solution was too complex and that I did saw something easier but I couldn't remember the place and it was in front of me all the time!. Just open ckeditor_source.js and uncomment the following line

// CKEDITOR.timestamp = ( new Date() ).valueOf();

Instead of generating a string and then removing unwanted characters, using valueOf() returns only a serie of digits so there is no problem, and by having it in ckeditor_source.js means that it's ready everytime that you are working with the source files without having to add the code to the page.

1 comment:

Lukas Bombach said...

Thanks * infinity