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
That was just what I was looking for.
Thank you very much for the this little tutorial.
Although I wasn’t planning on adding the same things, this was SO HELPFUL! A big thanks. :D
yeah, you are right with thouse buttons. But what about button supporting table operations? It does not want to work. I assume that you knew that making the button list, because there is not “table” at the list. When I want to add a table plugin (doing this right as you described in a tutorial), the table icon and other buttons does not appear. I think the problem is in differences between versions of tiny mcs used in word press.
erik,
To be honest I’ve never tried to add a table button to the Tiny MCE editor, so I don’t really have an answer for you. Does Tiny MCE even support tables?
[...] Simple … but also worth documenting as there seem to be a few questions on this topic around. LucidGreen has a post on further WordPress TinyMCE customisation too. [...]
Thanks for this. I’ve found this method works great for any feature that is included as a standard part of the “Advanced” TinyMCE. However, the file structure has changed – at least in WP MU and possibly in the latest WP build as well? Now you should edit the tiny_mce_config.php to make the changes desired.
Also you cannot add new functions to TinyMCE (like tables) because WordPress applies a filter to the functions to prevent hacking.
Wordpress discusses filters here: http://codex.wordpress.org/Plugin_API#Filters
Look under “Rich Editor Filters”
My problem is I don’t quite understand from their example exactly how to implement additional features for the editor. Any ideas would be appreciated…
Johnol,
I haven’t had much time to look at this, but it seems the bit of information you are missing when it comes to adding Filter’s is: where to put the code they show in the examples.
http://codex.wordpress.org/Filters explains that filter code needs to be put into a file that WordPress will load as a plugin.
I haven’t ever actually written a plugin myself, but it shouldn’t be too terribly difficult. Here’s the link on how: http://codex.wordpress.org/Writing_a_Plugin
@johnol – that link has moved – see http://codex.wordpress.org/Plugin_API/Hooks#Rich_Editor_Filters
Great Job! Thanks for your help.
Guys, to use table functionality, you should download the entire TinyMCE and copy the folder “plugins/table” to the WP TinyMCE plugins folder. Then, change the tiny_mce_config.php file as described and it will work (worked to me).
Thanks for this write up – it’s very helpful to me!
This tutorial was a BIG help. Thanks!
I only had one problem-the quotes in the code didn’t paste correctly.
I will give it a try and tell you the results
Thanks a lot for your efforts
I totally agree with you
Hello,
I dont think it works for latest version of wordpress
I believe your right, but I have not had the time to update this post. Sorry!
I used this exact hack in an old 2.6 installation a while back. Today I had to update a 2.7 installation to try and get this to work. Here’s what I discovered on my fun journey:
- The ‘tiny_mce_config.php’ is no more in WordPress 2.7+
- However, the same options can be found in wp-admin/includes/post.php – scroll down to the commented line ‘// TinyMCE init settings’.
– The structure is slightly different, so instead of:
theme_advanced_styles : “Green text=green-text;Special quotes=special-quotes”,
…it becomes:
‘theme_advanced_styles’ => “Red=red,Orange=orange,Blue=blue”,
The only problem I’m having is getting spaces in my style names. I’m assuming there’s an additional change to the array structure, but I’m not sure what it is yet.
This post is really old but still shows up in a google search about TinyMCE buttons so I’ll paste this here.
Everything described in this post is available, without hacking core, with the WP Super Edit plugin: http://wordpress.org/extend/plugins/wp-super-edit/
It uses the same methodology as you by unlocking hidden TinyMCE functions, but does it with a pretty-decent UI and no hacks. Defintely better than your process above (no offense).
Now what I really need is the ability to define custom buttons that work like the bold and italic ones. The custom styles pulldown tool, while useful, is kind of obnoxious in that it doesn’t let you do things like <blockquote class=”translation”>, which is what I need. In fact its impossible to create that HTML using TinyMCE in WordPress, which is a bummer. I’ll have to figure out the byzantine API for actually adding buttons manually with plugin.