CKEditor Plugin: text fields not editable

ckeditor not working in modal popup
ckeditor link not working
ckeditor input field
ckeditor popup example
ckeditor 5 not editable content
ckeditor documentation

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.

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.

Non-Editable Element?, I'm trying to write a custom plugin for CKEditor. What i need is a non editable element. So this should be an inline element, that is not editable by the user. I disabled the input-editor on the right click with a hack and now I'm  Checkbox and radiobutton do not get focus or context menu on FF 3.6.3 and are not editable because of this. Fake element replacement would be feasable to fix this since elements have basically two appearances selected and unselected. In #4056 I posted form_changes.zip which uses fake elements for this. Allthough changes are dated and should be

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.

CKEditor Plugin: text fields not editable, if 'Editable' means Html Editable, you can consider using an opensource WYSIWYG editor instance like CKEditor. If you want to just show your content normally,  unloaded – the initial state. The editable's instance was created but is not fully loaded (in particular it has no data). ready – the editable is fully initialized. The ready status is set after the first CKEDITOR.editor.setData is called.

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

🤾 🗳️ CKEditor plugin: text fields not editable, The html modal attribute tabindex='-1' is what seems to be causing problems for me. tabindex='-1' is actually in the bootstrap documentation and for some  function sendEditorText(text){ $("###rc.editorName#").ckeditorGet().insertElement( CKEDITOR.dom.element.createFromHtml( text ) ); closeRemoteModal(); } Most of this is unimportant. Basically, prepareFiddle() loops over the fields in the main insertion form (found in views/home/entry.cfm ), creates an array of values, and then builds up a string

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>

Noneditable plugin | Docs, This plugin enables you to prevent users from being able to edit content which areas of content are non-editable when using the noneditable plugin. The text content of the matches will be wrapped in spans, hiding the  This is the moment when you need to think about how you want to render the <simpleBox> element and its children to the DOM (what the user will see) and to the data. . CKEditor 5 allows converting the model to a different structure for editing purposes and a different one to be stored as “data” or exchanged with other applications when copy-pasting the

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

Widget editables should not be editable in readonly mode · Issue , mlewand added status:confirmed plugin:widget target:major and If text has been inserted - ignore input, if not - move selection back CKEDITOR.on('​instanceReady', function(event) { const editor = event.editor; if (!editor. Articles in the documentation (+6000 pages with API documentation). CKEditor is not just the interface that one can use to write. It is a component with a rich, well-documented API that allows developers to write custom features on top of it. The community created over 400 publicly available plugins for CKEditor 4 thanks to such an approach.

#4727 (Dialog: CKEditor in Modal Dialog is not editable) – jQuery UI, I had to downgrade to jQuery UI 1.9.2 again. I'm not sure what was fixed in 1.10.0​? Because I can't edit any text fields in the CKEditor dialogs still. I've tested in  Hundreds of features. Create content using multiple features available in CKEditor 4 thanks to its plugin-based architecture.

Changelog, #7860 : The BBCode plugin was stripping BBCode tags that were not implemented #7323 : [IE Quirks] Some fields are not centered in the dialog window. #6663 : Table caption that contains rich text is corrupted after an edit done with the  To sum up, we will need the following file structure for our plugin to work: ckeditor root/ plugins/ timestamp/ icons/ timestamp.png; plugin.js # Plugin Source Code. With the following structure ready, it is time to open the plugin.js file in a text editor and to start creating the source code of the plugin.

Ckeditor not load In paragraph [#2932265], The problem is no editor is loaded at this point so all the text fields are Edit: It still doesn't work if I try to edit a Paragraphs field using the "edit field" quick link. paragraph type, its custom js or the js of its field widget plugins. When trying to inline edit a long text field, I am unable to edit the text and the ckeditor plugin does not load. Comments. Comment #1 brantwynn. English. Chicago.

Comments
  • Hi Brian, thanks for the response, I also put that in there because of the Bootstrap docs. I'll maybe fiddle with this a little more tomorrow, with your insight in mind. I did get the suggested fix working in a jsfiddle, so I know it should work...
  • Hm, so this is also my problem. I am using the bootbox library to create the first modal, and its backdrop has a tabindex of -1. But the ckeditor backdrop also has a tabindex of -1, and they appear to conflict. Removing the tabindex on the bootbox backdrop fixes the problem. I can probably hack my way around this now--thanks!!
  • Worked like charm! :) Thanks a lot.