CKEditor Plugin: text fields not editable

ID : 274322

viewed : 81

Tags : pluginsckeditorplugins

Top 5 Answer for CKEditor Plugin: text fields not editable

vote vote


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.

vote vote


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] !== && !modal_this.$element.has(          && !$('cke_dialog_ui_input_select')          && !$('cke_dialog_ui_input_textarea')         && !$('cke_dialog_ui_input_text')) {           modal_this.$element.focus()         }       })     }; </script> 

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

vote vote


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 ($('.cke_dialog').length) {       return true;    }    return orig_allowInteraction.apply(this, arguments); }; 

I found the fix here:

vote vote


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


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

Top 3 video Explaining CKEditor Plugin: text fields not editable