Custom TinyMCE Buttons (only pre TinyMCE v3!)

Note: Please note that this page/code is only geared towards TinyMCE v2x. The bad news is, that TinyMCE v3 comes with a new infrastructure to support custom plugins which renders this example useless.
The good news however are that the TinyMCE v3 plugin support is much better and easier to use, so my work really isn't needed anymore - just take a look at TinyMCE documentation - it's pretty self-explanatory.

I don't know how many hours I spent searching the WORLD WIDE trying to finding proper and easy to digest resources that would help me in creating my own buttons (& functionality) to enhance the WYSIWYG editor for Wordpress (v2.1 that is).

If you're also frequently using custom code pieces inside your posts or simply are looking for a way to have one-click shortcuts to apply certain styles (and/or code) to your text without leaving the WYSIWYG editor then this zipped package might be just for you.

This not meant to be a detailed guide, but a clear (no fuss) and compact starting point to creating your own little buttons in TinyMCE. Most of it is pretty much self-explanatory, if you run into any issue let me know maybe I can help out. For more fancy logic check out the other packaged plugins that come with a full TinyMCE release, they contain good code snippets.

Installation

Unzip this custom TinyMCE plugin into your tinymce plugins folder, usually at /wp-includes/js/tinymce/plugins/

Modify tiny_mce_config.php (in /wp-includes/js/tinymce/) and let TinyMCE know about the new plugin:
$plugins = array('dd','inlinepopups', .....
Also, you need to specifically include the two new buttons by modifying this line:
$mce_buttons_2 = apply_filters('mce_buttons_2', array('dd_step','dd_note',...

Clear your browser cache and reload your WP New Post page

Once you got it running, you can start changing the code to do what you need it to do

Download

custom_tinymce_button.zip

another example: highlighting code in your posts (readme included)

Little pieces of your mind

JoshuaIsaac

This is an amazing plugin/addon that you have put together. Thank you very much for sharing it. You have brought my hours of toiling to an end.

May 15th, 2007

Oliver

'Glad you find it useful Joshua :) I tried to not overload the add-on in terms of features & functions, yet provide a solid base to start with - I may add a more complex and interactive example in the near future.

May 15th, 2007

Sarah

Thanks Oliver, this is a complete gem. It is really easy to understand and adapt to your own requirements. You are a star.

June 7th, 2007

sion

Is it possible that other plugins I have conflict with this? Because I followed all the install steps very carefully and all it did was erase all the buttons! I'm sad because my editor has only a quarter of the buttons functioning and the hotkeys don't work, either.
I wouldn't care at all except that this WP isn't for me but someone who knows 0 html and so I had hoped to help them out.Oh well.
special note:
wp v 2.2 hosted at (mt)

June 26th, 2007 subscribed

Oliver

sion, There shouldn't be any issues/conflicts with other plugins. I had tried the full suite of TinyMCE plugins available (using the latest developer ed). But I do know that there are WP deployments out there that behave extremely sensitive to any form of change or enhancement in the TinyMCE arena...

June 26th, 2007

Web Development Stuff, Freedom Stuff » Blog Archive » TinyMCE - The WYSIWYG Editor for WordPress - freedominteractive.com

[...] Tiny MCE Buttons [...]

September 26th, 2007

Doc4

You realize you just made the best alternative to buttonsnap.php for Wordpress 2.1 through at least 2.3. This was hands down the best and easiest code to modify within a minute to add additional buttons to the tinymce editor.

Good work here and thank you.

September 28th, 2007

Dave

Great code, have used it to create a pullquote button, however, I found a bug in the base code.

Within IE6 if you use the dd_code button and mark some inline text it works fine. If you have the focus within that new code text (marked by <span>), or have the same selection of text selected and toggle the code off, the text gets replaced with 'undefined'.

This doesn't happen if the code text was a <div> element, or in Firefox at all.

October 26th, 2007

Allen

Hi, Would you please share how you did it in the plugin files? (Not modifying any wordpress files or direcrories)

November 14th, 2007

Oliver

I won't have time to put together a step by step tutorial at the moment, but take a look at the file editor.php, this is where I insert the cforms button into the existing array of buttons, at run-time.

November 14th, 2007

» bridge tinymce plugin vlad.posea.eu: Educatie, Tehnologie, Societate si Bridge

[...] este bazat pe un template gasit aici. Pentru a-l instala trebuie sa descarcati cele 2 fisiere zip pe care le gasiti mai jos si sa le [...]

December 11th, 2007

Dalton

Thanks, Oliver! Another great Wordpress feature.

December 18th, 2007

Insky

Thanks, I'am a begginer in using Wordpress...
I succeed installing the given zip package but I can't make a new one...

It is very useful, and you really should contact a french wordpress programmer to translate it.

December 27th, 2007 subscribed

maria

great easy plugin!!!
the variables in dd/langs/en.js did not get replaced. i wrote them into the de_de.js in folder tinymce/langs, because i use a german version. now it works fine.

January 8th, 2008

Tina

Mh, I´ve tried but it does not work. No new buttons are showing up.
Using the latest Wordpress installation.
followed yours step by step, but nothing happens. Any suggestions why?
Thanks for help.

January 9th, 2008 subscribed

Oliver

Tina, hard to tell. In case you copy&pasted some of the above code (under "Installation") make sure that all single quotes are in fact single quotes and not accents or anything like that.
WP unfortunately messed up the above code snippets and introduced funky single quotes...maybe that's it?

January 9th, 2008

Jo Hawke

That's exactly what happened to me the first try, Oliver. I'd copied and pasted with the funky, curved quote thingy. Thanks so much for these great plugins!

January 26th, 2008 subscribed

Jimmy

Hi, this is a great plugin! It worked great on my WordPress installation... but recently I upgraded to WP 2.5 and it doesn't work anymore. I repeated the steps exactly. I made sure the quotes were single quotes not curly quotes. The files are in the correct folder. TinyMCE in WP2.5 looks a lot more fully featured than before, maybe they've changed how things work? Any help on this is appreciated!!!

April 8th, 2008 subscribed

Charlie

I'm also having trouble installing on WP2.5

A fix for this would be great!

April 10th, 2008

Frank

Having trouble with WP2.5, I followed the install explanation very carefully. Now every button is lost. Anybody can help ?

April 17th, 2008 subscribed

Jimmy

Hey, I'm the one who originally posted the question about compaitbility with 2.5. After some reading, I figured out that It doesn't work with 2.5. Don't even try it with 2.5. the new version of TinyMCE included in WP2.5 is a complete rewrite and so to make this plugin work would also require a complete rewrite. Look for other plugins at the WP site.

April 17th, 2008

Nancy

Sofar I've used it in my local PC and it's awesome :)

June 24th, 2008

switch to amazon