CKEditor grayed out on jQuery tabs when window is resized

We have jQuery tabs containing CKEditor. Recently I noticed an issue during window resize activities where the editors hidden on tabs are grayed out when you reveal that tab. It turns out that the editor’s main editor window is set to width 0 when a window resize event occurs and the CKEditor is hidden/not visible.

The issue explained in depth

Well to recap, I have 3 tabs using jQuery tabs. Each tab contains a CKEditor (previously it was TinyMCE). The editor works fine when viewed normally. However, there is a print action on one of the buttons. When clicked, it triggers the printing kung-fu (jqprint) and returns back to the tabs. When I click the other tabs (hidden) to reveal it, the CKEditor on it is grayed out.

Upon inspecting the DOM, the editor’s main content editor is set to ZERO width. This is probably due to the window resize activity happening during the printing kung-fu. I can also replicate the issue when actually resizing the window, then click on the hidden tabs to reveal it. When the CKEditor is grayed out, if you resize the window again, this time the CKEditor activates. This is probably because the editor is visible, therefore if can calculate the editor’s width.

Solution

Given the fact that all editors have fixed width and height (but we only need width here actually), we can just resize the editor every time a tab is clicked on jQuery tabs. This resize will simply reset the width and height to the same expected dimension, therefore setting the correct editor width making it visible.

Sounds clever eh?

We simply need to add an event handler to jQuery tab’s select event (select event means a tab is selected). With this simple trick, the CKEditor will never be grayed out again, ever!

The code

Below is the full code.

    $("#reporteditsourcetabs").tabs({
        cookie: {
            // store cookie for a day, without, it would be a session cookie
            name: 'sourceedit-cookie',
            expires: 1
        },
        select: function(event, ui){
            switch (ui.index) {
                case 0:
                    CKEDITOR.instances.reportheader.resize('100%', 200);
                    break;
                case 1:
                    CKEDITOR.instances.reporteditor.resize('100%', 200);
                    break;
                case 2:
                    CKEDITOR.instances.reportfooter.resize('100%', 200);
                    break;
            }
        }
    });