Customising / Configuring the TinyMCE Text Editor in WordPress

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 TinyMCE Text Formatting Palette

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:

A Customised Text Formatting Palette

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.

Posted on in Wordpress | Tags: , , , .
Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

11 Comments

  1. Posted January 6, 2010 at 5:06 pm | Permalink

    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!

    • Eddie
      Posted January 6, 2010 at 5:13 pm | Permalink

      Glad to be of use. I was surprised that this wasn’t better documented as it’s something that most themes should probably implement.

  2. Mark
    Posted March 7, 2010 at 7:30 pm | Permalink

    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!

  3. Posted May 7, 2010 at 2:19 pm | Permalink

    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!

  4. Posted June 11, 2010 at 10:08 am | Permalink

    Great tip, and works like a charm. This is in fact very under-documented at wordpress.org, so thank you!

  5. Mark Williams
    Posted August 16, 2010 at 6:11 am | Permalink

    quick question: if tinymce updates it’s plugin, these changes will be over-written yes?

    • Eddie
      Posted August 18, 2010 at 10:19 am | Permalink

      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.

  6. Posted November 21, 2010 at 4:32 am | Permalink

    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.)

  7. Posted March 28, 2011 at 3:43 pm | Permalink

    NICE! Thanks!

  8. NiceONE
    Posted July 14, 2011 at 9:17 am | Permalink

    Nice…. Good One..

  9. Posted June 25, 2012 at 10:15 am | Permalink

    As joost baaij mentioned, this is something that needs to be on the WordPress Codex site – it’s taken me far too long to find this out – extremely useful post, thanks for putting it out there :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>