Compatibility with IE11 (Internet Explorer 11)

[maxbarnas]

Long story short – CKEditor 5 doesn't work on IE11. Making it compatible with IE11 is a complex and long task – read more about the status of things and how you can help.

[maxbarnas]

Unit tests: 2258 are passing.

Most of failed tests are actually broken. Those not broken have most of the time the error:

TypeError: Unable to get property 'get' of undefined or null reference.

I wasn't spending more time trying to find the source of such error, but that would be my starting point.

Manual tests: Not a single manual test could be passed.

Every time I get Deferment unlock timeout - "2" never unlocked. error from Bender.

[Reinmar]

Super, thanks. It's usually a good news if many failed tests share the same error :D.

[djanosik]

There is a problem either in transpiler or in polyfill related to Symbol which causes this condition to be always true. The attributes property will never get initialized and the TypeError is thrown. When I fix this, the editor starts to crash (or hang) in IE11.

[Reinmar]

Interesting... this doesn't seem to be some tricky scenario so it's odd that Babel fails on that. How did you change it so it worked? observable[ attributeSymbol ]?

[Reinmar]

Nah, observable[ attributeSymbol ] would be unsafe. observable.hasOwnProperty( attributeSymbol )?

[djanosik]

@Reinmar Yes, hasOwnProperty works quite well.

[Reinmar]

So, I guess the next step would be to run ckeditor5-utils tests and then ckeditor5-engine. That may give some idea what's crashing. But since this requires transpiling the code we'd need support for that in https://github.com/ckeditor/ckeditor5-dev/blob/master/packages/ckeditor5-dev-tests/lib/utils/automated-tests/getwebpackconfig.js (we could add it under --es5 flag... I even think we supported it at some stage :D)

[djanosik]

Some other issues:

• Error on document.createTreeWalker missing some args.
• Crashes and hangs on container.remove(), because remove() function doesn't exist and is being called many (like hundred) times. There is probably some issue with callbacks.
• Selection.extend(...) is missing. When I comment out this line it starts to work, but selection is not reliable.

[Reinmar]

Yeah, good old browsers :|.

I think that before we'll start fixing these issue we need to figure out how to do that without bloating the existing code. By the issues you found it seems that we need more polyfills for missing/outdated methods. I wonder if we can safely polyfill all these.

[djanosik]

Any chance first release of CKE5 will work in IE11?

[Reinmar]

It depends. We don't know how far we are from making CKE5 really work in IE11. We'll check that after releasing 1.0.0 alpha and see if we'll be able to bring IE11 support for 1.0.0 final.

[djanosik]

Ok, thanks. Our decision whether to use CKE5 depends on it. Unfortunately we have many customers who are still using IE11 :/

[wwalc]

I did a quick search and it looks like IE11 will be supported by MS for some good time still (as long as Win 10 is supported): https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer
... which means at least until the end of 2020 (?) https://support.microsoft.com/en-us/help/13853/windows-lifecycle-fact-sheet

[lindenthal]

Dear CK 5 team,

first of all thanks a lot for putting so much effort into this editor. Here at OpenProject we just did a spike with it. The development of custom plugins is so much easier when compared with other editors. So my congratulations to your design decisions. Your editor is really awesome!

Getting back to the IE 11 topic:

Here at OpenProject we had a very similar discussion 2 years ago. We decided to drop support for IE 11. We had to make a decision whether we want to invest our time into the future or in the past. And we decided to invest into the future. Looking back I think it was the right decision. The browser landscape has changed dramatically in the last two years. We work for a large number of large corporates and governmental organizations. All of them are allowed to use modern browsers now. So if you ask them: Do we need to support IE 11 they all say Yes. If you ask them Are you allowed to use modern browsers they als say Yes. And if you ask them Do you want new features they also say Yes. And if you ask them Are you willing to pay the effort required to support IE 11 they say No.

These people are slowing down the entire innovation by sticking to their legacy world. If application developers continue to support IE11 this will give them less pressure to move on.

In my opinion more people would benefit from features such as table-support. Or legal requirements such as full accessibility.

@wwalc and @Reinmar and @djanosik: wouldn't it be an option to provide (paid) long-term support for CK4 until the end of IE11 min 2020? And everybody who wants the new features of CK5 needs modern browsers?

Again: Thanks a lot for all the hard work you for the community. I really appreciate that.

[djanosik]

@lindenthal I guess it would be ok to use CKE4. But how do I create headless CKE4 editor? CKE5 is modular and replacing UI with our own is quite easy.

• Do we need to support IE11? Yes :/
• Are you allowed to use modern browsers? Yes, mostly. But our solutions are also integrated into legacy systems that don't work in modern browsers. Also don't forget IE11 is usually the only option available on Windows Servers. There is no Edge and admins don't allow to install 3rd party apps.
• Do you want new features? Of course. But I think we can find a compromise here. We need CKE5 to not crash in IE11 and to support at least some basic editing features. I can explain why some features are not available. But I can't explain why it doesn't work at all.
• Are you willing to pay the effort required to support IE11? Not sure here.

[lindenthal]

Hi @djanosik,

I do understand your concerns but please allow me to exaggerate a little so you can better understand my position.

Actually you just confirmed my thesis: The development of modern web application is slown down by poorly maintained legacy applications. So people like the CKE developers, you and I have to suffer from that. And as I said: These companies that built up this technical debt try to hand over their problem to others. Which actually means that these companies are asking other open source developers to pay for their technical debt.

But I guess there are many other opinions on that :-)

Best
Niels

[caffodian]

I work in a field where IE11 is unfortunately still required, and customers can't easily upgrade. (Hospitals and other health) I haven't looked very much into what is actually broken with CKE5 under IE11, but I've had to deal with similar problems with polyfilling for IE11 in the past.

There are a few conditionals, but supporting IE11 (through webpack magic) would probably be something I'd be willing to pay for, or to help look into and work on.

[lindenthal]

@caffodian

I suggest you first upgrade to modern browsers and then upgrade to CK5. What is wrong with that approach? I have never heard anybody who said they can not use a modern Edge, Chrome or FF because of stability or security concerns. Do you?

[ckotzbauer]

@lindenthal
Yes, I have. Our software is used from bigger companies. I've tried to stop IE support, but they said it's the default browser. There are many computers which do not run with Win 10 yet, so no Edge is available. And other browsers are not really wanted... I'm glad that we ONLY have to support IE11 and not older ones. IE century isn't over (especially for companies)

[lindenthal]

@code-chris

I guess you agree that FF and Chrome both work perfectly fine on Windows 7, right?
And even if the IE11 is the default browser in an organiatzion this does not imply that they can not use FF in parallel. And for the very small fraction that can not install FF, they should simply stick to CK4.

The only reason to chose IE11 over FF are poorly maintained legacy web applications. I am not aware of any other reason.

The point is: The more applications continue to support IE 11 the longer it will take to get rid of it. So by supporting IE 11 we make this problem even worse.

You know there is another group of people that makes me even more angry: The people that request to support the combination of legacy browser with legacy screen readers (IE11 with JAWS 15). This combination really kills any UX and innovation. Did you ever see some of these people paying for the additional effort they create?

[ckotzbauer]

@lindenthal
I agree with you. No problem. I would like to kill IE immediately too. But unfortunately it's hard to stop IE support in commercially used software. And yes, as longer IE is supported from components like this one, as longer it will take until this browser dies completely.

The reason why I hope that CK5 will support IE is not cause of the browser:

• Our main product uses now a self-written Editor component which is really worse. I want to replace it with CK. But if I replace it with CK4, then I finally have duplicate effort (Self-Written to CK4 and later to CK5)
• CK4 does not support Webpack or has any other compatible solution.

[hubertguillemain]

Until the argument wether IE 11 shall or shall not be officially supported is closed, has anyone come up with a workaround solution using external polyfill libraries?

[Infuser]

I think anyone thinking IE11 support is not vital is not being realistic, I work for a large company that makes software for our customers a large number of them want IE11 support, I wish they didn’t but they do.

Currently I am developing a completely new front end in which I would like to use ckeditor5 but I cannot because of no IE11 support. Additionally it sounds like the upgrade path from ckeditor4 to 5 is difficult and we will have issues converting our customers old data. This means not only do we have to use ckeditor4 but we will be stuck on ckeditor4 forever.

[Reinmar]

To make it clear – while none of us personally want to work on adding support for IE11 (which feeling, I can see, you understand), it’s basically a matter of funding and opportunities for the project. You can always contact us (https://cksource.com/contact/) to discuss the options.

---

I've missed this question previously:

@wwalc and @Reinmar and @djanosik: wouldn't it be an option to provide (paid) long-term support for CK4 until the end of IE11 min 2020? And everybody who wants the new features of CK5 needs modern browsers?

The answer can be found in our Help center – "How long will CKEditor 4 be supported?

CKEditor 4 is a stable and mature application, which had its initial release at the end of 2012 and has been actively developed and improved since then. The CKEditor 4.x line is under a “Long Term Support” (LTS) programme which means that its development and support is guaranteed until 2023. If you are looking for a proven solution that will be fully supported for years, CKEditor 4 is a perfect choice.

[Reinmar]

@long-lazuli asked a few questions how to start investigating IE11 support:

I saw that main problems are es6-class & es6 getter/setter
so I thought it can be possible to compile it with some babel plugins.

Please take a look at https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-building-to-es5-target. I hope it will help.

then I start digging in babel-plugins compiling to see if I can make things work on old projects. the best I can imagine is to build a polyfill file dedicated to this browser.

It depends and, TBH, it's hard to tell without digging. The first thing to do will be to:

1. Make sure that you build CKEditor 5 to ES5, so there are no syntactic errors.
2. Make sure you load polyfills for ES's globals such as Map/Set/WeakMap/WeakSet/Symbol.
3. Check out missing HTML globals and features. Here, it becomes slippery. Sometimes you may try to load some well-known polyfills. E.g. Node#remove() may require one. But some HTML features that we rely on may not have proper polyfills. It requires a lot of testing basically. @djanosik already did some research in Compatibility with IE11 (Internet Explorer 11) #330 (comment).
4. Finally, there are browser bugs, "incomplete implementations" and "it works like this cause why not; ouch, and this time it worked differently cause it can!". In the world of contentEditable that's pretty broken even today. In IE11 you'll have to chase issues one by one and in case of them polyfills won't help. You may need to propose PRs for them with if ( iAmIE ) { doWeirdStuff() } else { doNormalStuff() } pieces.

The first two steps are provided by Babel polyfills. Then, there's a matter of finding or writing polyfills for HTML features we rely on or finding workarounds to not need them at all (will require PRs). Then, it'll get even darker and more smelly and you'll be chasing bugs and quirks of which it's plenty in IE11. At this stage, though, the editor should be quite usable already.

Anyway... good luck :)

PS. The best way to share your work and findings will be:

1. To fork https://github.com/ckeditor/ckeditor5 and one of the builds repo.
2. Modify ckeditor5/mgit.json to use your build's fork.
3. Modify that build's webpack.config.js and whatever else you'll need to load all the polyfills and stuff required by steps 1-3.

Thanks to that, the next person, or we, will be able to jump in and help.

You can read more about out development env in https://docs.ckeditor.com/ckeditor5/latest/framework/guides/contributing/development-environment.html

[runata]

I am working on the ckeditor compatibility issue right now. After building editor for ES5 I got to the point mentioned by @Suraj151.

i able to transform compiled ckeditor.js (es6) to es5 with babel plugins to support IE11 but now Symbol feature give me object error like TypeError: Unable to get property 'get' of undefined or null reference. for the all Symbols defined in packages.
any help to solve it as i want it immediately to integrate this editor in our site as soon as possible

It seems that I stuck on it for a while, so I would appreciate any advice.

[webloem]

I got to the same point a while ago and simply gave up.

Anyone reading this: please do not make the same mistake I did: transpiling to ES5 will not magically give you IE11 support. CKEditor5 relies on browser APIs that are different or not available in IE.

[cpeker]

Any updates regarding this issue?

[pjasiun]

We are just during the research about IE11 compatibility. Next week we will post the result of it.

[scofalik]

Hello everyone,

we concluded the research about running CKEditor 5 on IE 11. In overall it is possible to provide a CKE5 build for IE 11 and after using some polyfills and quick fixes it loads and base features work (like typing). Collaboration features seem to be working too. Unfortunately, without further work, the editor is not stable enough to be used on production. Some of the important things that do not work:

1. Clipboard uses different API and needs a special workaround to support pasting HTML (so-called “pastebin”). As of now, the editor crashes when using the clipboard.
2. There are a few problems with selection (some are discussed in this thread).
3. There are a few smaller glitches, bugs or crashes, for example, balloon toolbars are not positioned at all.
4. Performance is an issue. It is not in an unusable territory but there’s a visible difference in how smooth typing is (compared to other browsers).
5. Widgets (mostly tables) need some fixing/improvements.

And these are only some things that would need to be done.

The research was promising in the sense that it proved that support for IE11 is feasible. However, it will require a significant effort to become anywhere close to “production ready” and we’re not currently able to fund it ourselves. Therefore, we don’t have any plans yet regarding any ETA as we’re still looking for company(ies) who be willing to share the cost of this project.

If you want to play with CKE5 in IE 11, here is an instruction on how to create a build for IE 11. Only the classic editor was tested and available, although you could probably prepare other editors looking at changes done in ckeditor5-build-classic.

1. Clone ckeditor5 repository. Checkout to ie11 branch.
2. Run mgit sync. This one may fail on Windows, run it until it will pass without errors.
3. Run yarn install.
4. Go to packages/ckeditor5-build-classic.
5. Run yarn build.
6. ckeditor.js file will be generated in ckeditor5-build-classic/build.

Keep in mind that mgit command refers to project named mgit2. See this comment.

If you are interested in what exactly has been changed, check which repositories are switched to ie11 branch and use whatever tool you like to see changes introduced in commits. To check which branches are switched to ie11 run mgit st in the ckeditor5 repository main directory.

If you’d like to pick this up and help with fixing issues on IE 11, you are most welcome to do so!

[mleathem]

(Thanks for you work on this... sadly IE11 is a "must have", so I'm told ... )

To be honest, I'm struggling with this: got so far as...
$ yarn run mgit sync

• but keeps failing :

"Host key verification failed"
"fatal: could not read from the remote repository"

--
I've tried a few diffrent clone (with my github username - thinking maybe this was the credential fail)
even if /package/ dirs are being created, (from cloing the node_modules) but the dirs are empty.

--- background - If it helps anyone:
the ticket here doesnt mention mgit sync must relate to https://www.npmjs.com/package/mgit - so inststall globally.
then: $ npm run bootstrap
( this runs: mgit sync && yarn install )
but that's as far as I get because: $ yarn run mgit sync just returns "Host key verification failed"

[scofalik]

Ooops!

mgit is our own project which is actually named mgit2 (though the command is mgit). Sorry about missing that one. It should be installed after you run yarn install as it is listed in package.json. However, I am not sure if it doesn't conflict if you have mgit installed. You can also try installing mgit2 globally, using npm or yarn.

BTW. Why do you run yarn run mgit sync?

[Yahav]

So, can we get a status on IE11 support? where does it stand? did you guys ever brought it to a stable, production worthy state?

[wwalc]

@Yahav So far no companies were interested in sponsoring the work on IE11 compatibility - this is a blocker for us to move this issue forward because IE11 support requires a lot of work. So for now, we gave up after closing the research that @scofalik mentioned in his comment.

[coolswing]

Hi,
on ie11 i get the error : SCRIPT1003: Expected ':' when including @ckeditor/ckeditor5-vue to my vue-cli application making it crashed.

[Rialzista]

Hello @wwalc , will IE11 be ever supported?.
Are we safe to just use CKeditor 4 for the next 5 years?
Or would we be required to upgrade?

[wwalc]

@Rialzista There is no progress regarding IE11 (by not spending time on it, we're able to move on and continue adding more new features: https://ckeditor.com/blog/CKEditor-5-v15.0.0-with-horizontal-line-page-break-responsive-toolbar-and-SVG-upload-support/)

As for CKEditor 4: the official support for CKEditor 4 is until 2023. This is something that we committed to already, and for sure we will not end up the support earlier than that. Which gives you 4 years of peace of mind. Closer to that date we'd have a look at how the situation looks like and decide what next with CKEditor 4.

[godai78]

This issue is no longer relevant as IE11 reaches the end of support as of June 2022.