CODEWITHSUNDEEP
javascripttwitter-bootstrapckeditor
DisgruntledGoat
DisgruntledGoat

Reputation: 72510

CKeditor autogrow plugin inside Bootstrap tabs

I'm using multiple CKeditors (latest version, 4.5.7) inside Bootstrap tabs. I want to add autogrow to the editors, so they always fit the content. I have the plugin installed and have this in my config:

config.autoGrow_minHeight = 500;
config.autoGrow_onStartup = true;

It works fine for the first (visible) editor, but when I click a tab the other editors are MASSIVE - thousands of pixels tall. As soon as I click in the editor it resizes to the correct size.

Here's a full demo: http://85.159.215.184/cke-grow/ - click Tab 2 to see the problem.

This may be a bug in CKeditor, but since their bug reporting site isn't working I'm asking here in case there is a simple fix or workaround. Any help?

Upvotes: 1

Views: 490

Answers (1)

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

I figured out a solution: automatically focusing the editor when the tab is switched.

// hook into Bootstrap's tab JS
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // get the ID of the textarea (I have IDs based on the tab pane ID)
    var paneId = $(this).attr('href').replace('#', '');
    var textareaId = 'content-'+paneId;
    // get the CKEditor instance and focus it
    CKEDITOR.instances[textareaId].focus();
});

Upvotes: 2

Related Questions