[Edge] Browser crashes when switching to source mode

[parixit]

Hi CKEditor Team,

I have just upgrade to the window 10. I found the issue of viewing source of ckeditor content. It just refresh page as I click on Source option from toolbar of ckeditor.

I found this issue in CKEditor 4.5.1 (revision a513a92)

[Piotrek Koszuliński]

It's of course Edge's bug. See here – ​https://connect.microsoft.com/IE/feedback/details/1577449/edge-browser-crashes-when-using-ckeditor-toggling-from-wysiwyg-to-source-mode

You can try to push Microsoft to fix it faster by commenting/upvoting this issue. We've already tried.

[Piotrek Koszuliński]

Please note that using a ​source dialog is a good workaround. See the demo here – ​http://sdk.ckeditor.com/samples/sourcearea.html

[Piotrek Koszuliński]

PS. In our opinion Edge is not yet ready to be used. It's still full of bugs and some features which are available in every other browsers (including older IEs) are missing (e.g. a good support for drag and drop). We don't understand why Microsoft decided to release it and for a time we not recommend using it.

[Andrew Williams]

We believe there is a better solution to using the Source dialog:

We have debugged the CKEDITOR with Microsoft Edge and we believe we have found the root issue behind the browser crash.

We found that if you try to use the isContentEditable property on a HTML textarea Element in Edge it causes the unexpected browser crash. This does not happen in any other browser including IE11.

We believe a quicker resolve to this issue than trying to wait for a patch from Mirosoft is to avoid using the isContentEditable check when in Microsft Edge

So in the method isReadOnly in the CKEDITOR.dom.node class change:

isReadOnly: function( checkOnlyAttributes ) {
		var element = this;
		if ( this.type != CKEDITOR.NODE_ELEMENT )
			element = this.getParent();

		if ( !checkOnlyAttributes && element && typeof element.$.isContentEditable != 'undefined' )
			return !( element.$.isContentEditable || element.data( 'cke-editable' ) );
		else {
			// Degrade for old browsers which don't support "isContentEditable", e.g. FF3

			while ( element ) {
				if ( element.data( 'cke-editable' ) ) {
					return false;
				} else if ( element.hasAttribute( 'contenteditable' ) ) {
					return element.getAttribute( 'contenteditable' ) == 'false';
				}

				element = element.getParent();
			}

			// Reached the root of DOM tree, no editable found.
			return true;
		}
	}

to

isReadOnly: function( checkOnlyAttributes ) {
		var element = this;
		if ( this.type != CKEDITOR.NODE_ELEMENT )
			element = this.getParent();
		if(!checkOnlyAttributes && (!CKEDITOR.env.edge || CKEDITOR.env.edge && !element.is( 'textarea' )))
		{
			if (element && typeof element.$.isContentEditable != 'undefined' )
				return !( element.$.isContentEditable || element.data( 'cke-editable' ) );
		}		
		
		// Degrade for old browsers which don't support "isContentEditable", e.g. FF3

		while ( element ) {
			if ( element.data( 'cke-editable' ) ) {
				return false;
			} else if ( element.hasAttribute( 'contenteditable' ) ) {
				return element.getAttribute( 'contenteditable' ) == 'false';
			}

			element = element.getParent();
		}

		// Reached the root of DOM tree, no editable found.
		return true;
	
	}

This should be a simple workaround to get this into the CKEDITOR 4.5.2 release.

We know you should not have to do this and you would rather wait for an update from Microsoft but who knows when that will be?

Yes there are other issues like drag and drop being broken but at least this workaround will stop the browser from crashing whenever you hit the source button

We have updated: ​https://connect.microsoft.com/IE/feedback/details/1577449/edge-browser-crashes-when-using-ckeditor-toggling-from-wysiwyg-to-source-mode

[Piotrek Koszuliński]

Awesome! Huge thanks for debugging this.

The timing is very bad though, because we've just finished the testing phase for 4.5.2. Taking into account the importance of this issue, we will however try to evaluate and fit this patch into this release anyway.

[Piotrek Koszuliński]

Pushed ​branch:t/13609. The fix seems to be totally safe and it indeed prevents crashes.

However, I could not reproduce the crash in a very simple scenario – ​http://jsfiddle.net/5vfarznL/1/. It must be more specific.

[Andrew Williams]

Please see ​http://jsfiddle.net/v502scbh/2/

simple create textarea with javascript and then reference isContentEditable property

var element = document.createElement('textarea');
alert(element.isContentEditable)

[Andrew Williams]

Replying to joomlack:

Please see ​http://jsfiddle.net/v502scbh/2/

simple create textarea with javascript and then reference isContentEditable property

var element = document.createElement('textarea');
alert(element.isContentEditable)

This is what happens when you go into source mode in the editor. You create a new textarea using javaScript and then test if it is readonly in which you check the isContentEditable property and it is then game over in Microsoft Edge.

[Piotrek Koszuliński]

Confirmed. Thanks again.

[Piotrek Koszuliński]

And I've noticed that you posted that JSFiddle already on IE/Edge tracker. My bad :)

[Szymon Cofalik]

Merged with commit:3974e8a

[Piotrek Koszuliński]

Great. Thanks @joomlack again!