1000 Miles or Bust!

Take a Hike…

Customizing the TinyMCE buttons in Wordpress 2.1

The TinyMCE editor in Wordpress 2.1 was driving me a little bonkers, what with its tendency to change your html willy-nilly and its limited toolbar buttons. Of course, one can get the advanced toolbars to show up by pressing alt-shift-v (in Windows Firefox), but I wanted all those buttons on the advanced toolbar there from the start. You can also use this knowledge to customize the toolbars in any way you like using any button available on the TinyMCE control reference page.

And why does WP’s TinyMCE refuse allow you to type in a <div> tag, even in the “code” tab? It replaces the <div> tag with a <p> tag? What’s that about?

Here are the fixes.

  1. Edit the file /path-to-wordpress/wp-includes/js/tinymce/tiny_mce_config.php
  2. To get the advanced toolbar functions by default, change line 34 ($mce_buttons_2=...) to read
    $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'fontselect', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo'));
  3. To partly solve the no <div> tag problem, change line 24
    $valid_elements = ‘p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]’;
    to read:
    $valid_elements = ‘-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]’;
  4. Now it would be much nicer if the “code” window actually allowed you to edit the raw html source, but this workaround doesn’t quite do that.
  5. Of course, this file will be overwritten during an upgrade, so don’t forget to keep a backup copy of your edited file around when you upgrade Wordpress!

Resources:

http://weblogtoolscollection.com/archives/2007/02/07/wp-21-hidden-editor-buttons

http://mu.wordpress.org/forums/topic.php?id=1246

http://wiki.moxiecode.com/examples/tinymce/installation_example_02.php

http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

http://wordpress.org/support/topic/102799

February 12th, 2007 Posted by Tim | Hacking, Every last post | 9 comments

9 Comments »

  1. Thanks for your help!

    Comment by Mike Toews | February 19, 2007

  2. Hi Tim,

    Thanks alot for sharing this!

    Comment by Kimo | February 20, 2007

  3. Thanks for the workaround!

    Comment by Greg Balanko-Dickson | February 26, 2007

  4. Worked perfectly! Any idea how to limit the formatselect dropdown to just P, H3, and H4? I only want to allow my clients to make headings so that TOC Generator (http://fucoder.com/code/toc-generator/) will work easily.

    Thanks again! I searched for 4 hours trying to find out how to customise TinyMCE in WP2.1. If only I’d found your site first!

    Comment by Michelle | May 10, 2007

  5. Could you explain your “partly solve the ‘no DIV tag’ reference? There’s now a plugin that at least puts the toggle button on the standard toolbar, if you don’t want ALL the buttons all the time. I’m now trying to fix the “no DIV tag” problem, but the other method I found doesn’t seem to be working.

    Comment by ginny | May 13, 2007

  6. By ‘partly solve’ the no DIV tag I meant that a truly decent solution would be a visual text editor that didn’t destroy your underlying html–DIVs and other tags–and that let you see and modify the html as you pleased in the code window.

    Comment by Tim | May 14, 2007

  7. Aha! The lightbulb is lit! My in-house geek/husband was able to follow these instructions. Thank you so much.

    Comment by ginny | May 19, 2007

  8. […] to apply a drop shadow. When I use the built-in RTE, will it strip it out, or has we can applied Tim Rohrer’s fix […]

    Pingback by Blogula Rasa » Eureka! I Can Has Rich Text Editor! | May 19, 2007

  9. Thanx for the tip - I really wish I could do more manual “div” tagging inside the editor - seems tinymce could support any manual tagging if it can do the other tags.

    Comment by Wayne | February 5, 2008

Leave a comment

You must be logged in to post a comment.