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.
- Edit the file /path-to-wordpress/wp-includes/js/tinymce/tiny_mce_config.php
- 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')); - 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[*],*[*]’; - 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.
- 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
