How to use CKEditor in a Bootstrap Modal?

Question

If I use the CKEditor plugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this

<         


        

Answer 1

I think i found some solution for this.

As @Pavel Kovalev suggested it have something to do with boostraps 4 JS and focus in modal script. I had just same problem as Yours.

There is an option for modals called "focus" which sets focus on initialized modals. Disabling this option makes all Your inputs in CKEditors modals work as they should. Not having focus on this modal i can live without :)

See details here: https://getbootstrap.com/docs/4.3/components/modal/#options

In my approach to this i finaly got something like this:

...

Also it is propably good idea for some more extensive testing, especialy if You have multiple bootstrap modals with CKEditor on one page.

As for the all the "fixes" You can propably find on web. Have a look that they most likely refer to bootstrap 3 where events on modal are different so they simply cannot work. Including @Pavel Kovalev solution.