TinyMCE Button Bars in Drupal

October 28, 2008 · 2 min read

A couple of days ago, I was setting up the TinyMCE Drupal module on a friend's blog, and the blogger wanted quite a lot of the TinyMCE buttons enabled (who doesn't?). But the problem was that the TinyMCE Drupal module only supports up to 3 lines of buttons (while the TincyMCE editor itself has no such limitation), which meant that the last line of buttons was unnecessarily long, and caused all sorts of layout issues.

As you can see, the last line of buttons is far wider than the allowed form space (this is show within the Garland Drupal theme). In this case, a large number of buttons (11, in fact) are all part of just one option - the TinyMCE "table" plugin. So I decided that the best thing to do is simply move the table plugin's buttons to a fourth line. Unfortunately, there's no official configuration option for the TinyMCE Drupal module to do this, however, I created a fairly simple, and safe, tweak to the module's tinymce.module file to do it.

So to get the table plugin's buttons onto a fourth row, I added a small bit of code to the tinymce_config function in the tinymce.module file, immediately before the line that reads:

$min_btns = 5;

I simply added the following code:

// Move the 'tablecontrols' buttons to a fourth line if necessary.
$key = array_search( 'tablecontrols', $init['theme_advanced_buttons3']);
if (($key!==FALSE) && (count($init['theme_advanced_buttons3'])>10)) {
    $init['theme_advanced_buttons4'] = array( $init['theme_advanced_buttons3'][$key] );
    unset($init['theme_advanced_buttons3'][$key]);
}

The logic here is quite simple... it first looks to see if the tablecontrols option is set in the third row of buttons. And if the tablecontrols option is indeed set, and the third row has at least 10 other buttons, then it creates a new fourth row with just the tablecontrols option, before removing that option from the third row of buttons. The result looks something like this:

Ah, exactly what I was after. 🙂

Of course, this same approach could be used to move any other buttons you choose, but simply moving the table plugin's buttons was enough for me. 😎

Attachments​

Attachments