How to use CKEditor in a Bootstrap Modal?

ckeditor popup example
ckeditor cdn
ckeditor 5 codepen
ckeditor link popup not working
ckeditor documentation
fn modal constructor prototype enforcefocus
ckeditor download
ckeditor image dialog not working

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/

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

solution-for-all-bugs-ckeditor-in-bootstrap-modal-test.html on Ticket , // instance, using default configuration. 36, CKEDITOR.replace( 'editor1' );. 37  By default CKEditor shows filemanager in a popup window. That may cause problems if a browser blocks popups. The solution is to show filemanager in modal. This article is about how to use Bootstrap modal to show filemanager. Adding modal on the page Place modal markup on the page (I recommend placing modals in the …

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

Bootstrap / CKEDITOR workaround - JSFiddle, <div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" id="​editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor. I am having the same issue as pointed on How to use CKEditor in a Bootstrap Modal? The problem however is that the fix doesnt seem to work any more. &lt;button type="button" data-toggle="modal" d

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

ckeditor dialog options broken inside bootstrap modal · Issue #263 , Hi, I'm trying to embed a ckeditor inside a bootstrap dialog, but ckeditor's own modal options become broken. Any ideas if this can be fixed from  Just put the code in js file and make sure you include the file after the jquery and bootstrap This is very short and simple. import CKEditor Javascript config files from the path they are store in your app.

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!

CKEditor 5 in a Bootstrap 4 modal, Demo of Bootstrap 4 CSS Framework with Javascript modal component and CKEditor 5 rich-text editor balloon editor. Read more in https://ckeditor.com/do 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.

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

CKEditor filemanager in Bootstrap modal, That may cause problems if a browser blocks popups. The solution is to show filemanager in modal. This article is about how to use Bootstrap  FWIW, I couldn't get Peter's solution to work, but the following worked for me, and still keeps the hack in a separate file so you don't have to edit any Bootstrap source files: // bootstrap-ckeditor-modal-fix.js // hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog // // Include this AFTER both

CKEditor drop downs do not work in Bootstrap Modal, I am unable to use CKeditor with Bootsrap Modal. The select input control are not being shown. When viewing CKEditor 4 in a Twitter Bootstrap modal using IE, the floating panel does not remain open, but immediately closes. Steps: In IE (confirmed in IE8, IE9), open the sample attached file and click "Launch Modal." Select the Normal or Styles dropdown. Expected Result: The floating panel should open, allowing selection of menu items.

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. In this article, we will implement a modal popup in react js bootstrap. step by step explain how to use bootstrap modal in react js. I will show you how to use bootstrap model in react application. you have to just simple follow few step to done simple example of bootstrap model popup in react js. in this example we will install react-bootstrap

can't edit fields of CKEditor in jQuery UI modal dialog, Hi to all. I have a trouble with CKEditor 3+ When I use ckeditor in "jQuery UI modal dialog" ( http://jqueryui.com/demos/dialog/#modal ) and try  Issue with Twitter Bootstrap Apologies if this has already been asked somewhere, I couldn't see any way to search the forum. I'm trying to host CKEditor in a simple Twitter Bootstrap Modal.

Comments
  • look this example jsfiddle.net/7zDay
  • possible duplicate of Bootstrap with CKEditor equals problems
  • This answer gives a better solution which works with more dialogs.
  • Not even sure what this does but it fixes my problem! Hero.
  • works! just create a separate file and include it just after the jquery and bootstrap scripts. helped me to save my time and nerves!
  • this didnt work for me. for another generic solution check stackoverflow.com/questions/31678662/…
  • Saved me! +1 Thanks!
  • THIS is the Solution what i've been keen on. according to the @peterb mentioned link, after including jquery and bootstrap, put this code and works fine :)
  • For me not enough. I neede to change Z-index for .cke_dialog and .cke_dialog_background_cover too
  • // 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() } }) };
  • Could you explain your answer?
  • $('#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); } });
  • this for CKEditor in modal
  • TabIndex prevents focus fields. everything else css positions