Back in 2007, I don’t know how many hours I spent searching the WORLD WIDE trying to find proper and easy to digest resources that would help me in creating my own TinyMCE editor buttons (& functionality) to enhance this WYSIWYG editor for WordPress (v2.1 at the time).
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 me thinks. For more fancy logic & routines check out the other packaged plugins that come with a full TinyMCE release, they contain good code snippets for reuse.
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 somewhat 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.
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
another example: highlighting code in your posts (readme included)
