IE7 & IE8 - CKEditor not fully loading on Page refresh

[Teresa Monahan]

To Reproduce:

• Clear the browser cache.
• Download a CKEditor build to your local file system - I have reproduced with the Full Packages of the 13-01-07 and 13-01-08 nightly builds.
• Open a CKEditor sample from this downloaded build in IE7 or IE8. The page loads correctly.
• Refresh the page.

Problem: The IE loading icon continues to display and the status bar states that the skin icons.png file is still being downloaded - see attached screen capture.

This only seems to be an issue in 4.x - it does not happen with 3.x builds.

[Jakub Ś]

This problem can be reproduced with IE7 and IE8 from CKEditor 4 beta.

I have checked this with Fiddler. Seems that the only difference between IE7-8 and newer are "not modified resources".

• When you first load editor 12 resources are loaded
• When you refresh the page In IE9-10 (see screenshot) you can see three resources with code 200 and 9 with "Not Modified 304" while in IE7-8 you only can see 3 with code 200. Perhaps there is a problem with 304?
• On the other hand Fiddler used with CKEditor 3.x doesn't show Not Modified 304 resources as well so this might not be the right clue.

[Jakub Ś]

#10482 was marked as duplicate.

[GreenAirplane]

I had the same problem and found some solution for it.

You can find the problem if you will set breakpoint in scriptloader.js line 125:

script.$.onreadystatechange = function() {
	if ( script.$.readyState == 'loaded' || script.$.readyState == 'complete' ) {
		script.$.onreadystatechange = null;
		onLoad( url, true );
	}
};

At some point you will see that this event was fired but script.$.readyState === 'loading' and script.$.src === '$CKEditorDIR$/styles.js'

Easiest way to fix it: add something to styles.js file (e.g. console.log('styles.js')). Don't forget to clear cache after changes in styles.js

[haugerbr]

Replying to haugerbr: I changed it to the production version because this bug still exists in a later production version than the Beta.

[haugerbr]

Replying to GreenAirplane:

I had the same problem and found some solution for it.

You can find the problem if you will set breakpoint in scriptloader.js line 125:

script.$.onreadystatechange = function() {
	if ( script.$.readyState == 'loaded' || script.$.readyState == 'complete' ) {
		script.$.onreadystatechange = null;
		onLoad( url, true );
	}
};

At some point you will see that this event was fired but script.$.readyState === 'loading' and script.$.src === '$CKEditorDIR$/styles.js'

Easiest way to fix it: add something to styles.js file (e.g. console.log('styles.js')). Don't forget to clear cache after changes in styles.js

Your solution did not work for me. I do not have a scriptloader.js file and changing the styles.js file did not resolve the problem.

[GreenAirplane]

Try ckeditor/samples/replacebyclass.html page with styles.js and styles_fixed.js Don't forget to clear browser cache

[GreenAirplane]

Replying to haugerbr:

I do not have a scriptloader.js file

You need to download source code if you want to debug this issue.

Your solution did not work for me. I do not have a scriptloader.js file and changing the styles.js file did not resolve the problem.

Please make sure that you cleared browser cache after applying fix. I uploaded archive with example (ckeditor.zip). It is most recent demo from ​http://ckeditor.com. There are 2 files: styles.js - empty file, styles_fixed.js - has some content.

How to use:
1) Open /ckeditor/samples/replacebyclass.html in IE 7,8
2) Refresh page -> editor will disappear
3) Rename styles_fixed.js to styles.js
4) Clear browser cache
5) Open the same page
6) Refresh page

As I understand, the cause of this issue is how old IE works with cached files. Looks like it just has a bug related to empty resources (because of it we are getting wrong state in even handler).

I hope it will help.

[Frederico Caldeira Knabben]

Replying to GreenAirplane:

The think that I'm finding strange on your solution is the fact that you say that styles.js is empty. I was not able to find any download of CKEditor with an empty styles.js.

Both the reporter and j.swiderski are confirming this issue with setups that definitely have contents in styles.js.

Much probably the problem is somewhere else at this point.

[GreenAirplane]

Replying to fredck:

The think that I'm finding strange on your solution is the fact that you say that styles.js is empty. I was not able to find any download of CKEditor with an empty styles.js.

Both the reporter and j.swiderski are confirming this issue with setups that definitely have contents in styles.js.

Much probably the problem is somewhere else at this point.

Ok, yes it is possible that there is one more problem with similar symptoms. We don't use "stylescombo" plugin and because of it I tested only configurations where styles.js is empty.

Anyway, my solution works for us in production (unfortunately most of our users use IE8) and I hope that it can help to someone else who have similar problem.

Also, if someone will want to dig this issue then I suggest to check loadScript function in scriptloader.js or if someone can provide me access to page that have this issue (and styles.js is not empty) then I can try it later. Pls note that I cannot reproduce this issue on demo page or using full package in IE8 without modifications in styles.js

[Teresa Monahan]

I can't reproduce this since CKEditor 4.1.2. It looks like it has been indirectly fixed.

[Jakub Ś]

I can confirm I no longer see this issue.