The default TinyMCE WYSIWYG editor is pretty basic. I really wanted to extend it to make it a little more functional.
I wanted to add a drop down box that would let me set custom styles on elements and I wanted a drop down box that would let me make selections into headers H1, H2, etc. Surprisingly it’s pretty easy. You only need to edit one file.
Here’s what you do, you will be editing the “tiny_mce_gzip.php” file located in /wp-incldes/js/tinymce/ directory. Visually that’s
/your_root_directory/
|
|–/wp-includes/
|
|–/js/
|
|–/tinymce/
|
|–tiny_mce_gzip.php
Step 1: Backup
backup this file! If you mess it up it’s your own fault, don’t complain to me.
Step 2: Add the buttons
Open the tiny_mce_gzip.php file and go to line number 110. It’s near the bottom. The section looks like this:
$mce_buttons = implode($mce_buttons, ',');
$mce_buttons_2 = apply_filters('mce_buttons_2', array('styleselect','formatselect'));
$mce_buttons_2 = implode($mce_buttons_2, ',');
$mce_buttons_3 = apply_filters('mce_buttons_3', array());
$mce_buttons_3 = implode($mce_buttons_3, ',');
$mce_browsers = apply_filters('mce_browsers', array('msie', 'gecko', 'opera'));
$mce_browsers = implode($mce_browsers, ',');
The variables (those things with $’s in front of them) that read “$mce_buttons…” define which buttons will appear on the editor’s control section. They are numbered and that tells you which row the buttons will appear on. So the default editor only has one row and all those buttons (not shown here because of length) include the buttons to bold, italicize etc.
To add a new button you just have to include the button name (explained later) in the appropriate button variable’s array. So to add the two buttons I wanted to add in row two you look at line number 112 and add the names ‘styleselect’ and ‘formatselect’ into the array like so:
$mce_buttons_2 = apply_filters('mce_buttons_2', array('styleselect','formatselect'));
This will add two drop down lists to a new row on the editor. One will give you access to styles, which we will set next, and another which will let you select HTML tags to wrap around text like H1, H2 and PRE.
Step 3: Define custom styles
Scroll down just a few lines to line 120. the section looks like this:
initArray = {
mode : "specific_textareas",
textarea_trigger : "title",
width : "100%",
theme : "advanced",
Add a new line right below the squiggly bracket, “{“, so that your new code looks like this:
initArray = {
theme_advanced_styles : "Green text=green-text;Special quotes=special-quotes",
mode : "specific_textareas",
textarea_trigger : "title",
width : "100%",
theme : "advanced",
You’re style declarations go in the quotes after “theme_advanced_styles :” and they are formated like so: “what to show in the box=the css class name“.
In my example you will have two styles available in the drop down box “Green text” and “Special quotes”. Highlighting any text in the editor, or selecting any tag in the path viewer and clicking one of these drop downs will apply that the css rule class=”green-text” or class=”special-quotes” respectively. You can then add those classes to your site’s style sheet and customize away.
That’s it your done. Save the file and try it out.
Edit (1/9/2007): According to johnol’s comment below there are certain types of content that you cannot add due to WordPress filtering it out. Apparently, in order to prevent hacking. So You can’t add a tables button to your TinyMC editor it would seem. You can get more info about these filters at: http://codex.wordpress.org/Plugin_API#Filters
Button list
Here is a list of buttons that you can add to the editor, most of them are self explanatory. To get more info see the TinyMCE documentation.
bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator