ckeditor in IE local intranet does not work well with internet zone Active Scripting security is disabled

[ewolfman@…]

I was told by the helpdesk to open a ticket here with regards to an issue concerning ckeditor running over IE in an intranet environment. The full correspondence, attachments and findings are details here: ​http://helpdesk.cksource.com/view.php?ticketref=9936-QRTY-8066

Here is the summary of things: A *Local Intranet* app using ckeditor renders the ckeditor correctly but all the plugin buttons are not responsive, if the internet (not local intranet) has Active Scripting set to disabled. This is an IE issue and not a ckeditor issue, but it can be dealt with. The thing is that in IE if the internet security zone's Active Scripting is disabled, it seems like innerHTML (which is used by ckeditor to render the editor) produces the correct html but does not bind any events required to activate the buttons, such as onmouseup.

The workaround to this is simple (and is detailed in the original helpdesk ticket).

P.S. The above security settings is not a custom settings but the default settings for IE in Windows servers. For example, if you install Win 2008, IE security settings by default are set to Enable Active Scripting in Local Intranet, but Disabled Active Scripting in Internet zone. This allows running local scripts with the exception of events in innerHTML. I was not aware of this limitation in IE prior to using ckeditor and I will be more than happy if my conclusions are incorrect.

[ewolfman@…]

I investigated this a little further. It seems like the events on an innerHTML elements are not thrown if the innerHTML takes place before the newly created element is appended to the document (in the described Active Scripting scenario). For example, if I have a div element rendered which will serve as a container: <div id='content'></div>

and a doSomething function which simply displays an alert:

function doSomething() {

alert('1');

}

consider this code:

var div = document.createElement('div');
div.innerHTML = '<a onmouseup="doSomething();">click me</a>';
document.getElementById('content').appendChild(div);

this code above renders a "click me" anchor, but the onmouseup event is not called. But, if I switch lines 2 and 3 (i.e. innerHTML takes place after appending the new div), like so:

var div = document.createElement('div');
document.getElementById('content').appendChild(div);
div.innerHTML = '<a onmouseup="doSomething();">click me</a>';

Then the onmouseup is called when we click the anchor.

BTW: this bug also reproduces on jQuery 1.7 if you use 'append' over 'html', because 'html' replaces the html for an existing element which is already in the DOM, and append creates a new child.

I know that this is an IE issue and not a ckeditor issue, but it is easily "fixable" as you can see.

Remember that this will only reproduce on the Active Scripting setting described in the original comment.

[ewolfman@…]

With regards to my previous comment, a possible workaround for this issue would be to take the generated ckeditor's html and apply it again on the now attached DOM node. This causes IE to bind the events successfully this time around. For example:

if ($.browser.msie) {
    CKEDITOR.on("instanceReady", function (event) {
        var toolbox = $('#cke_' + event.editor.name + ' table.cke_editor div.cke_toolbox');
        var html = toolbox.html();
        toolbox.html(html);
    });
}

[Jakub Ś]

To Reproduce:

1. Open IE9 for example
2. Go to internet options -> security
3. Switch to intranet settings and trun on active scripting. See intranet.png
4. Switch to internet settings and turn off active scripting. See internet.png
5. Open any CKEditor sample hosted on your local server.
6. If you open page with IP E.g. 192.168.1.100 then you will get message that JavaScript is disable. If on the other hand you open page with localhost, you will get no warning and CKEditor will start but buttons will generate no events. See ip.png and localhost.png

[npay]

We have the same issue on IE7/IE8/IE9, some of our customers are complaining

No buttons are working, neither the drop-down (font, size ..) nor the color-picker and maybe other functionalities.

Step to reproduce : -put your site in trusted sites (where the ckeditor is installed, you can test with the ckeditor demo page): internet options -> security -> trusted Site > add your site set the security for trusted site to low or medium-low (active scripting is enabled for trusted)

• disable the active scripting in internet-Security.

internet options -> security -> internet -> customize -> disable active scripting.

--> then comes the issues, no buttons are working.

note:if the events are reattached or refreshed once the cke editor is in the DOM it works again, as suggested above.

--> adding "about:blank" in trusted site seems to do the trick as well, but not very convenient for our customers to deploy easily.

[Darren Tai]

It has been four weeks since our developer "npay" reported the same issue and our major customers are escalating. Is there a plan or ETA to fix this soon?

[Jakub Ś]

Currently we are focusing all our resources on v4 of the editor which we plan to release very soon.

---

@ewolfman has presented one workaround to this problem when you are using jQuery

if ($.browser.msie) {
    CKEDITOR.on("instanceReady", function (event) {
        var toolbox = $('#cke_' + event.editor.name + ' table.cke_editor div.cke_toolbox');
        var html = toolbox.html();
        toolbox.html(html);
    });
}

Here is another workaround with usage of CKEditor api and plain JavaScript only:

CKEDITOR.on( 'instanceReady', function( event )
{
	if (CKEDITOR.env.ie) {
		var toolbox = document.getElementById('cke_'+event.editor.name).getElementsByTagName('table')[0].getElementsByTagName('div')[0]; 
		var html = toolbox.innerHTML;
		toolbox.innerHTML = html;						
	}
});

You can also create your own getElementsByClass name method to simply find div with cke_toolbox class.

Have you tried using it? Is there any IE version for which this workaround does not work?

[Jakub Ś]

The same can be reproduced in IE11, Edge and CKEditor 4.x. Please see #14578 which was marked as duplicate.