CKEditor gets disabled on hidden elements

I'm trying to make elements editable on my website.

I'm using a sort of tabbed-content system, where each tab contains different content. When a user is logged in, the content of each tab is editable. Or at least, that's what it should be.

Right now, it's not. Since most of the tabbed elements are hidden at first, and I create all CKEditor instances when loading the webpage, most of them get disabled (presumably because they're in a hidden element). However, when I make the element visible, the CKEditor doesn't get enabled.

I would say there's two solutions, either it not getting disabled in the first place or some enable function for it when it becomes visible.

Could anyone help me on this? I'm not sure how to approach this issue. Thanks for your time :)

Thu, 01/30/2014 - 01:00

Lolmewn

Joined: 26/01/2014

Posts: 3

I have done quite a bit of

I have done quite a bit of research, and after fiddling with it for hours, I have come to the conclusion that this is the solution:

CKEDITOR.on('instanceReady', function(e) {
    var node = e.editor.element.$;
    if ($(node).attr("contenteditable") == "false") {
        $(node).attr("contenteditable", true);
        e.editor.setReadOnly(false);
    }
}

Works for me, anyway :) Actual code is a little bit different (has debug, also e.editor.updateElement()), but if someone else has the same issue, this should help them.