CKEditor Plugin: text fields not editable

ID : 274322

viewed : 81

Tags : pluginsckeditorplugins





Top 5 Answer for CKEditor Plugin: text fields not editable

vote vote

99

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

86

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.

vote vote

77

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

vote vote

64

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

60

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







Related QUESTION?