WYSIWYG editors such as the TinyMCE editor used by WordPress are great in that they allow people with no HTML skills to insert formatted text into web pages. There are times however when it’s best to restrict some of the formatting options to prevent people from messing up the appearance and markup of their pages. For instance, I think it’s a good idea to remove the text colour palette and to disallow the use of H1 and H2 tags in body text as most of our themes use these headings tags once or twice in the template — to use them too much (arguably) isn’t good for the pages SEO.
The default text formatting palette allows users to select any text colour they like (which can have very ugly results!). Heading 1 and Heading 2 tags can also be inserted where they shouldn't be.
By default, the formatting panel in TinyMCE allows users to make the text any colour they want and to insert H1 and H2 tags where they like by selecting them from the formatting drop down list. It took me a while to figure out how to disable these (and other) options but I finally worked it out.
If you’re using wordpress, all you have to do is open your functions.php file and add a filter that’s applied to the function tiny_mce_before_init. The filter calls a function that you write that changes the TinyMCE default formatting options. In the example below, I’m defining the options that will appear under the dropdown formatting list and disabling the ability to change the text colour:
function change_mce_options( $init ) {
$init['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
$init['theme_advanced_disable'] = 'forecolor';
return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');
With this code in place, your text formatting palette will now be without the Heading 1, Heading 2 and text colouring options and should look like this:
This customised palette has no text colour button. The Heading 1 and Heading 2 tags have been removed from the formatting dropdown.
For more configuration options, have a look through the TinyMCE Configuration Options. This method will work for any backend that uses TinyMCE and not just WordPress.
10 Comments
Very nice. I’d been wondering how to prevent users from inserting H1 and H2 tags in the visual editor for a while. Thanks for the useful info!
Glad to be of use. I was surprised that this wasn’t better documented as it’s something that most themes should probably implement.
Beautiful. I normally use the TinyMCE Advanced plugin to configure these options, but that plugin provides no way to change the options in the format select box. Thanks for this!
Dude – thanks for this. I was trying to figure out how to disable some of the wp-specific features, like the “kitchen sink” button and the “insert more” button, but wasn’t sure how to label them in theme_advanced_disable list because the TinyMCE wiki doesn’t list them. Turns out, if you view the dashboard and mouseover each button, a tooltip will pop up saying something like *.label_desc, where ‘label’ is the information you’ll need. For instance, if you rollover the kitchen sink button it shows up as ‘advanced.wp_adv_desc’. To remove that button, add ‘wp_adv’ to the theme_advanced_disabled list. Hope this helps save someone some time!
Great tip, and works like a charm. This is in fact very under-documented at wordpress.org, so thank you!
quick question: if tinymce updates it’s plugin, these changes will be over-written yes?
No, because you’re not editing the tinymce files (just your own theme), the changes will remain in place even if you update the plugin.
Hey Eddie,
Was struggling to figure out how to limit the formats (per my client’s request) and Google delivered up this article indirectly from the Moxie code forum where you placed a link:
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=68147
Just what the doctor ordered, thanks!
BTW, we could use another WordPress+TinyMCE expert over at WordPress Answers on StackExchange if you wanted to come over and help some of us out from time to time!
(FYI, I’m just an active user and currently a moderator, but not an owner of the site.)
NICE! Thanks!
Nice…. Good One..