CKEditor Plugin: text fields not editable

Question

I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.

I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.

When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.

$('#cke_229_textInput').val('help');

Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.

This happens in both Chrome 30 and FF 24.

My call to create the editor:

var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
    fullPage: true,
    removePlugins: 'newpage,forms,templates',
    extraPlugins: 'abbr',
    allowedContent: true
});

Thanks for any tips or hints!

---

Update #1

Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...

---

Update #2

This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.

---

Final Update

So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.

Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.

Answer 1

The modal html attribute tabindex='-1' is what seems to be causing the issues for me.

The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.

Answer 2

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>

Note: Include this file after both jQuery and bootstrap are loaded.

Answer 3

OMG I have been googling this for hours and finally fond some code that works!!

Stick this in your dialog page that will have a ckeditor in it:

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 the fix here: https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

Answer 4

Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.

<script>
$(function(){ 
       // APPLY THE EDITOR TO THE TEXTAREA
       $(".wysiwyg").ckeditor();

       // FIXING THE MODAL/CKEDITOR ISSUE
       $(".modal").removeAttr("tabindex");
});
</script>

Answer 5

I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.

    $('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
    var ckeOptions = {
        entities: false,
        htmlEncodeOutput: false,
        htmlDecodeOutput: true
    }

    CKEDITOR.replace('message', ckeOptions);
    CKEDITOR.config.extraPlugins = 'justify';