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

This worked for me with bootstrap 4.4 and ckeditor 4.14. All you need to do is to initialize the ckeditor in your modal's shown.bs.modal event.

$('#yourModal')
    .on('shown.bs.modal', (e) => {
        CKEDITOR.replace('editor')
});

worked like a charm.

Answer 2

Don't know, maybe in my version it's already fixed, but my solution is:

    $("#messageModal").on('shown.bs.modal', function() {
     CKEDITOR.replace('message', {
       height: '400px',
       width: '100%'
     });
   })