CKEditor on Modal

ckeditor popup example
ckeditor link popup not working
ckeditor5 in modal
ckeditor 5 codepen
ckeditor image dialog not working
ckeditor documentation
ckeditor ecosystem
bootstrap modal

I have a CkEditor 4.x on modal.. I try modal jQueryUI and Bootstrap modal.

When i show Ckeditor in modal and when i use its plugins, fields of plugin don't have a focus, and i can't set it with click. enter link description here . If i init CkEditor in body, then all OK. But if on modal.then lost focus

I use standart init for CkEditor

self.ckwys = CKEDITOR.replace('wysivgBlock', {
   height: 300
});
$.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
    // add whatever conditions you need here:
    &&
    !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
        modal_this.$element.focus()
    }
})

};

This code is solved my problem.

I know users have complained about this with jquery ui dialog, but I'm having the same issue with twitter bootstraps modal. I attached a demo  Note that CKEditorFuncNum, CKEditorCleanUpFuncNumand CKEditor are mandatory parameters. Since the script uses an iframe, it can be styled using CSS. You can change it to whatever you want or set it dynamically using jquery .css() syntax.

And this for jqueryUI

  var orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
                $.ui.dialog.prototype._allowInteraction = function (event) {
                    if ($(event.target).closest('.cke_dialog').length) {
                        return true;
                    }
                    return orig_allowInteraction.apply(this, arguments);
                };

I found solution Here enter link description here

Do you have any examples where CKFinder is displayed as a "modal" pop-up within the existing browser window, or does this seem plausable  ckeditor popup example (7) . 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

Because you are using Bootstrap modal, you could try to remove tabindex="-1" from modal fade. Found this solution here.

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  If the event's target wasn't a descendent of the modal it was sending a focus() event to the modal. Because the iframe isn't a child of the modal focus() gets throw to the modal. So whenever the panel was shown, the click would cause Bootstrap to trigger focus() on the modal which would trigger the blur() code in CKEditor and close the menu.

<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. 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.

the ck editor itself creates a modal overlay when a popup is created. i had the same symptoms you had and it was an invisible div over it. Did  We are migrating CKEditor issue tracking to GitHub. Please, use GitHub to report any new issues. Please, use GitHub to report any new issues. The former tracking system (this website) will still be available in the read-only mode .

By default CKEditor shows filemanager in a popup window. That may cause problems if a browser blocks popups. The solution is to show  CKEditor Initialization. It is now time to initialize a CKEditor instance that will use the Simple Link plugin along with its toolbar button. To register the plugin with CKEditor, we have to add it to the extraPlugins list. We also need to enhance the toolbar definition and add the plugin button by using the toolbar parameter.

Comments
  • have you tried CKEDITOR.instances.ckwys.focus(); ??
  • No... Problem only in plugins of ckeditor. Focus set in textarea. And if i open plugin search(for exmpl). field search don't have focus... If i click to search field. focus Remains on a textarea.////
  • I cant understand what is the problem. Can you show it in a jsfiddle?
  • Ok.. I created fiddle jsfiddle.net/axfzaht9 I put ckEditor to popup.. if you open this popup and click to plugins button prntscr.com/9ba5j2 and this fields prntscr.com/9ba5ye is not active.!!!
  • looks like focus works on firefox but not on Chrome...