CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogckeditorjqmodal
Max
Max

Reputation: 5063

How to use CKEditor in a Bootstrap Modal?

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/

Upvotes: 26

Views: 51104

Answers (18)

Quyền Sinh Trần
Quyền Sinh Trần

Reputation: 81

For Charkra UI v2, ReactJS: set the property trapFocus of the modal contain CKEditor component:

<Modal trapFocus={false} ... />

will resolve the problem

Upvotes: 0

Danny
Danny

Reputation: 4114

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;
}

Upvotes: 0

Mikael
Mikael

Reputation: 3236

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

Upvotes: 1

kshitij
kshitij

Reputation: 710

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.

Upvotes: 1

Dens
Dens

Reputation: 469

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()
          }
        })
      };

Upvotes: 0

t4taurus
t4taurus

Reputation: 465

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.

Upvotes: 2

fingers10
fingers10

Reputation: 7937

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.

Upvotes: 0

ThePueblo
ThePueblo

Reputation: 196

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.

Upvotes: 0

Chic Theme
Chic Theme

Reputation: 21

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.

Upvotes: 2

Transformer
Transformer

Reputation: 3760

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>

Upvotes: 0

BilgiSoft
BilgiSoft

Reputation: 41

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

Upvotes: 3

Chandra Kumar
Chandra Kumar

Reputation: 4205

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!

Upvotes: 3

Vova Batrakov
Vova Batrakov

Reputation: 1

All very simple:

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

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

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

Upvotes: 0

Pavel Kovalev
Pavel Kovalev

Reputation: 8116

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

Upvotes: 56

Koloritnij
Koloritnij

Reputation: 1217

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

Upvotes: 0

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

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()
        }
    })
};

Upvotes: 1

Hossein Shahsahebi
Hossein Shahsahebi

Reputation: 7288

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;
}

Upvotes: 5

peterb
peterb

Reputation: 111

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

Upvotes: 3

Related Questions