CKEditor filemanager in Bootstrap modal

Tweet
Share
Share1
1 Shares

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 bottom of the page) and add an iframe inside modal body div:

<div id="file_browser-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-admin" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        <iframe></iframe>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

Updating javascript

Now you should update browse button click function. Use dialogDefinition event handler to do that.

CKEDITOR.on( 'dialogDefinition', function( ev )
    {
        var editor = ev.editor;
        var dialogDefinition = ev.data.definition;

        // This function will be called when the user will pick a file in file manager
        var cleanUpFuncRef = CKEDITOR.tools.addFunction(function (a)
        {    
            $('#file_browser-modal').modal('hide');
            CKEDITOR.tools.callFunction(1, a, "");   
        });
        var tabCount = dialogDefinition.contents.length;
	for (var i = 0; i < tabCount; i++) {
	    var browseButton = dialogDefinition.contents[i].get('browse');
	    if (browseButton !== null) {
                browseButton.onClick = function (dialog, i)
                {
                    editor._.filebrowserSe = this;
                    var iframe = $('#file_browser-modal').find('iframe').attr({
                        src:editor.config.filebrowserBrowseUrl+'&CKEditor=body&CKEditorFuncNum='+cleanUpFuncRef+'&langCode=en' 
                    });
                    $('#file_browser-modal').appendTo('body').modal('show');
                }
           }
       }
   }

Styling

CKEditor dialog block has z-index value of 10010. You should set modal z-index value greater to show it above the dialog.

#file_browser-modal{
    z-index: 10011;
}

 

Inspired by this article.

Related Posts