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

<!-- Modal --> 
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">   
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>
       </div>
       <div class="modal-body">
             <form>
             <textarea name="editor1" id="editor1" rows="10" cols="80">
             This is my textarea to be replaced with CKEditor.
             </textarea>            <script>
             CKEDITOR.replace('editor1');
             </script>
             </form> 
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
       </div>
     </div>   
   </div> 
</div>

The editor works, but all the form controls on the popup windows of the editor are disabled, if you try to add a link or an image, for example, you cannot insert the URL or any description because the inputs are disabled.

Any workaround for this issue?

This is a fiddle example: http://jsfiddle.net/7zDay/

possible duplicate of Bootstrap with CKEditor equals problems — BENARD Patrick, Mar 25, 2014 at 14:50
This answer gives a better solution which works with more dialogs. — Reinmar, Jul 28, 2015 at 14:26

Pavel Kovalev · Accepted Answer · 2016-10-05 05:48:04Z

56

This should help http://jsfiddle.net/pvkovalev/4PACy/

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

Update October 2016:

CDN link for CKEditor has been changed, so I updated jsfiddle

edited Oct 5, 2016 at 5:48

answered May 15, 2014 at 0:03

Pavel Kovalev

7,7685 gold badges46 silver badges69 bronze badges

1

Not even sure what this does but it fixes my problem! Hero.
– Will
May 22, 2014 at 13:15
2

works! just create a separate file and include it just after the jquery and bootstrap scripts. helped me to save my time and nerves!
– Akima
Apr 16, 2015 at 10:58
2

this didnt work for me. for another generic solution check stackoverflow.com/questions/31678662/…
– pinaki
Jul 28, 2015 at 14:26
1

Saved me! +1 Thanks!
– Joshua - Pendo
Jan 15, 2016 at 15:50
2

Wow, this is the only solution I've found after searching for an hour that works. Thanks!
– afollestad
May 16, 2016 at 21:15

| Show 6 more comments

Hossein Shahsahebi · Accepted Answer · 2015-11-25 14:46:17Z

5

This is late to answer but doing css trick will solve the issue.

Default z-index of Bootstrap modal is 10051 and default z-index of ckeditor dialog are 10010. The trick is just to increase ckeditor dialog z-index as below. put below code in your css file:

.cke_dialog
{
    z-index: 10055 !important;
}

answered Nov 25, 2015 at 14:46

Hossein Shahsahebi

6,8065 gold badges24 silver badges38 bronze badges

2

For me not enough. I neede to change Z-index for .cke_dialog and .cke_dialog_background_cover too
– Meloman
Sep 27, 2017 at 9:01

Add a comment |

peterb · Accepted Answer · 2014-06-11 11:17:51Z

3

See the response from aaronsnow to this thread on the ckeditor forum: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

He's given the code. Just put the code in js file and make sure you include the file after the jquery and bootstrap

answered Jun 11, 2014 at 11:17

peterb

1111 silver badge2 bronze badges

// fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog // Include this file AFTER both jQuery and bootstrap are loaded. $.fn.modal.Constructor.prototype.enforceFocus = function() { modal_this = this $(document).on('focusin.modal', function (e) { if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) { modal_this.$element.focus() } }) };
– Craig Gjerdingen
Aug 3, 2015 at 22:34

Add a comment |

Chandra Kumar · Accepted Answer · 2017-06-16 11:47:05Z

Use the 100% working script..

<script type="text/javascript">
    // Include this file AFTER both jQuery and bootstrap are loaded.
    $.fn.modal.Constructor.prototype.enforceFocus = function() {
      modal_this = this
      $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
          modal_this.$element.focus()
        }
      })
    };
</script>

Thanks!

JonathanDavidArndt · Accepted Answer · 2018-01-05 20:49:52Z

3

  $(document).on({'show.bs.modal': function () {
                 $(this).removeAttr('tabindex');
      } }, '.modal');

edited Jan 5, 2018 at 20:49

JonathanDavidArndt

2,68213 gold badges37 silver badges51 bronze badges

answered Jan 5, 2018 at 18:16

BilgiSoft

411 bronze badge

Add a comment |

Chic Theme · Accepted Answer · 2018-07-21 13:02:40Z

2

Just open /core/config.js in ckeditor files than change "baseFloatZIndex" variable

baseFloatZIndex = 10000

to

baseFloatZIndex = 20000

It will change the start "z-index" of your editor box and the popups.

answered Jul 21, 2018 at 13:02

Chic Theme

212 bronze badges

Add a comment |

t4taurus · Accepted Answer · 2020-04-15 17:50:39Z

2

I just remove the tabindex="-1" from the dialog main div element. Here is the sample code

<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

I just remove this

tabindex="-1"

and it starts working.

answered Apr 15, 2020 at 17:50

t4taurus

3653 silver badges13 bronze badges

Add a comment |

Mohd Abdul Mujib · Accepted Answer · 2016-04-13 19:47:38Z

I was getting Uncaught TypeError: Cannot read property 'fn' of undefined

So I just replaced the $ inside the script provided by @Pavel Kovalev above to jQuery.

jQuery.fn.modal.Constructor.prototype.enforceFocus = function () {
    modal_this = this
    jQuery(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
        }
    })
};

kshitij · Accepted Answer · 2021-03-23 10:25:57Z

1

Add this css to set the .cke_dialog_container z-index which is linked to your dialog container

.cke_dialog_container 
{
    z-index: 20000
}

and for the modal I have used something like given in an already answered post:

$("#createLot").on("show.bs.modal", function() {
        $(this).removeAttr('tabindex');
    })

This solved my problem of dialog box on link click.

answered Mar 23, 2021 at 10:25

kshitij

6609 silver badges18 bronze badges

this is the correct answer we can remove the tabindex from html no need to do it with jquery but good catch
– Mian Almas
Dec 4, 2021 at 6:57

Add a comment |

Mikael · Accepted Answer · 2022-01-22 12:13:18Z

1

In case someone encounters this issue I solved it by removing tabindex="-1" from the bootstrap modal tag.

answered Jan 22, 2022 at 12:13

Mikael

3,19822 silver badges21 bronze badges

Add a comment |

Koloritnij · Accepted Answer · 2016-05-25 20:15:50Z

0

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%'
     });
   })

answered May 25, 2016 at 20:15

Koloritnij

1,2071 gold badge9 silver badges15 bronze badges

Add a comment |

Vova Batrakov · Accepted Answer · 2016-12-27 11:33:32Z

0

All very simple:

$('#modal').removeAttr('tabindex');

$('#modal').focusout(function(){
    $(this).css({'position':'relative'});
});

$('#modal').focusin(function(){
    $(this).css({'position':'fixed'});
});

edited Dec 27, 2016 at 11:33

answered Dec 27, 2016 at 11:23

Vova Batrakov

11 bronze badge

Could you explain your answer?
– Fabian Schultz
Dec 27, 2016 at 11:31
$('#message-modal').removeAttr('tabindex'); $('#message-modal').focusout(function(){ if($('.cke_dialog_background_cover').css('display')=='block'){ $(this).css({'position':'relative'}); setTimeout(function(){ $('#message-modal').css({'position':'fixed'}); },10); } });
– Vova Batrakov
Dec 27, 2016 at 11:42
this for CKEditor in modal
– Vova Batrakov
Dec 27, 2016 at 11:43
TabIndex prevents focus fields. everything else css positions
– Vova Batrakov
Dec 27, 2016 at 11:46

Add a comment |

Transformer · Accepted Answer · 2018-03-28 23:01:36Z

This is very short and simple. import CKEditor Javascript config files from the path they are store in your app. This is mine

<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

After this you can call CKEditor to replace your textarea by doing this

CKEDITOR.replace('topic', {
          uiColor: '#9AB8F3',
			    language: "en-us",
			    toolbar: "Custom",
          height: "200",
          width: "400",
			    skin: "moono",
			    toolbar_Custom: [
			    	["Bold", "Italic", "Underline"], 
			    	["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"], 
			    	["Link", "Unlink"]
			    ],  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>


<!-- Modal --> 
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
        <div class="modal-dialog">
        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-content">
                <div class="user-box">
                    <h2>Create a new discussion</h2>
                    <form method="post" id="discussion_add" action="#">
	                    <!--FORM FIELD START-->
	                    <div class="form">
	                        <div class="input-container">
	                            <input type="text" id="id_session" name="session" required="true">
	                        </div>
	                        <div class="input-container">
	                        	<textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
	                        </div>

	                        <div class="input-container">
	                            <button class="btn-style">Create Discussion</button>
	                        </div>
	                    </div>
	                </form>                
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
<button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>

ThePueblo · Accepted Answer · 2019-10-03 10:52:46Z

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:

<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>

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.

fingers10 · Accepted Answer · 2020-03-15 04:53:36Z

0

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.

answered Mar 15, 2020 at 4:53

fingers10

7,48312 gold badges57 silver badges101 bronze badges

Add a comment |

Dens · Accepted Answer · 2020-06-09 12:09:09Z

For Bootstrap 4, this line will no longer work. They will need to figure out that it changed to:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Instead of

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

So, Code should be like this:

$.fn.modal.Constructor.prototype._enforceFocus  = function() {
        modal_this = this
        $(document).on('focusin.modal', function (e) {
          if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
          && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
          && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
          }
        })
      };

In my case $.fn.modal.Constructor.prototype._enforceFocus exists, but it is not called... Any idea why? — kaljak, Jan 17, 2022 at 14:42

Danny · Accepted Answer · 2023-05-31 13:42:59Z

From the official ckeditor (v5) docs on using it with bootstrap (as of May 2023): https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/css.html#compatibility-with-bootstrap

The text, as links often become stale:

Bootstrap modals

We noticed that Bootstrap modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:

Configure the z-index of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay. Configure Bootstrap so it stops “stealing” the focus from the rich-text editor input fields. To address the first issue, add the following styles to your application:

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

Pass the focus: false option to Bootstrap modal() function to fix the second issue:

$( '#modal-container' ).modal( {
    focus: false
} );

Check out the demo of CKEditor 5 rich-text editor working correctly with Bootstrap.

Bootstrap table styles

There is also a known issue concerning table styles brought by Bootstrap breaking the table (widget) layout during editing. If you do not want any additional space around edited tables when using Bootstrap, add the following styles to your application:

/*
 * Override the width of the table set by Bootstrap content styles.
 * See: https://github.com/ckeditor/ckeditor5/issues/3253.
 */
.ck-content .table {
    width: auto;
}

Collectives™ on Stack Overflow

How to use CKEditor in a Bootstrap Modal?

17 Answers 17

Bootstrap modals

Bootstrap table styles

Your Answer

Not the answer you're looking for? Browse other questions tagged
twitter-bootstrap
modal-dialog
ckeditor
jqmodal
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

Bootstrap modals

Bootstrap table styles

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged twitter-bootstrapmodal-dialogckeditorjqmodal or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
twitter-bootstrap
modal-dialog
ckeditor
jqmodal
or ask your own question.