Customizing TinyMCE without Advanced TinyMCE

Advanced TinyMCE is a useful plugin; it lets you add all of the buttons that WordPress “hides.” When you need to add ‘Word-like’ WYSIWIG editing to a WordPress site, it’s probably your best choice. But most of the time, giving your users a ‘Word-like’ interface is a bad idea. (Admit it!)

After spending some time trying to write TinyMCE plugins to get around Advanced TinyMCE’s main weakness (in my own use & experience) I have found that customizing TinyMCE for WordPress without Advanced TinyMCE is more effective than using the plugin. It’s faster than fighting with TinyMCE and it makes adding buttons more deliberate (a good thing when you’re trying to K.I.S.S.)

My main complaint with the plugin is that the “Styles” dropdown is poorly implemented. If you include the Styles dropdown, but do not check “Import the current theme CSS classes”, styles are imported from tinymce-advanced/css/tadv-styles.css (required styles for the TinyMCE editor) and tinymce-advanced/css/tadv-mce.css (user styles for the TinyMCE editor). tadv-styles.css includes the aligncenter, alignleft, alignright, wp-caption, wp-caption-dd, and wp-Gallery styles, which for most purposes, should not be available to your user.

I have not seen this documented elsewhere, but I also had trouble getting the Styles dropdown to consistently display styles imported form tadv-mce.css on a client’s computer. I do not know if this was a caching issue, related to their browser, or what… but it was a problem with Advanced TinyMCE that I couldn’t fix.

I couldn’t get Advanced TinyMCE to behave the way I needed it to (only two styles in the Styles dropdown menu, to keep it simple; as few buttons in the Visual editor as possible; and an approximation of the website’s styles in the editor), so I uninstalled the plugin and added the following code to my functions.php file:

Add styles to your TinyMCE editor

function childtheme_mce_css($wp) {
return $wp .= ',' . get_bloginfo('stylesheet_directory') . '/css/mce.css';
}
add_filter( 'mce_css', 'childtheme_mce_css' );

Customize buttons

function childtheme_mce_btns2($orig) {
return array('formatselect', 'styleselect', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help', 'mymenubutton' );
}
add_filter( 'mce_buttons_2', 'childtheme_mce_btns2', 999 );

Specify Styles visible in Styles dropdown (styleselect)

function childtheme_tiny_mce_before_init( $init_array ) {
$init_array['theme_advanced_styles'] = "1st Option=classname1;2nd Option=classname2;3rd Option=classname3";
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'childtheme_tiny_mce_before_init' );

These lines of code take advantage of the Rich Text Editor Filters, not well particularly well documented, but there’s enough out there to piece it all together.

In other projects, I’ve also found it useful to be able to extend what’s allowed to pass through the TinyMCE filter as “good” HTML.

Allow iFrames (good for GoogleMaps embed code)

add_filter('tiny_mce_before_init', create_function( '$init_array',
     '$init_array["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
return $init_array;') );

Read More

• TinyMCE Custom Buttons from the WordPress Codex
• Plugin API/Hooks 2.0.x: Rich Editor Filters
• Plugin API/Filter Reference: Rich Text Editor Filters
• TinyMCE:Configuration/theme advanced styles
• TinyMCE:Configuration/extended_valid_elements

Edit 12/17/2010: I’ve closed the comments on this post because it’s over a year old. I haven’t worked on this since then, but people do still use the hack. If you have questions about customizing TinyMCE for WordPress, the WordPress support forum is a good place to start.