Adding TinyMCE Buttons to WordPress 3.2 Fullscreen mode


On my way to update Shortcodes Pro for the latest beta of WordPress “version (3.2-beta1)” I found they added a filter to manage the TinyMCE buttons that appear on the brand new distraction-free writing mode ( fullscreen writing ). This filter is called wp_fullscreen_buttons and it passes the $buttons array as an argument.

Here is a little example to add, a fictitious, “highlight” button. Keep in mind you need to have this button (plugin) already defined.

if ( !function_exists('my_fullscreen_buttons') )
{
function my_fullscreen_buttons($buttons)
{
// add a separator
$buttons[] = 'separator';
// format: title, onclick, show in both editors
$buttons['highlight'] = array(
// Title of the button
'title' => __('Highlighter'),
// Command to execute
'onclick' => "tinyMCE.execCommand('highlight');",
// Show on visual AND html mode
'both' => false
);
return $buttons;
}
add_filter( 'wp_fullscreen_buttons', 'my_fullscreen_buttons' );
}

You can learn more about the filter looking at WordPress source code:

File: wp-admin/includes/post.php line:1776

Reactions (5)

  1. srikanth

    i am looking same thing…really nice…
    great job……… for this plugin……..

    Thank you………

  2. Hi Matt, I can see the button with this code but it doesn’t have an icon or text for identifying it. How can I get a “h” or something else on this button?

    • I was having the same problem… looking through the source code, you can only use the class to add one… however, there’s no easy way to add a style through a stylesheet.

      I had already enqueued a stylesheet for post.php and post-new.php files under the wp admin, so I was able to add (to that stylesheet) styles like the one below to finally get a custom icon to appear:

      .wp_themeSkin span.mce_buttonname {
      background-image:url(‘../path/to/button.png’);
      background-position:0 0;
      background-repeat:no-repeat;
      }

      hope that helps someone…

  3. Pingback WordPress 3.2+ : ajout d’un button à la FullScreen Toolbar » imath..

  4. Thanks for sharing this Matt, I’ve been wondering about the filters available to the new full screen view. Did you discover any others in the process?