So, I wanted to do some work with adding a custom button to the TinyMCE visual editor in WPMU. I found a few references to other people doing it here and there, but no good tutorials and no simple examples. I tried to wrap my head around Viper’s Video Quicktags code. But, what he’s doing is fairly complex (to say the least).
I found a somewhat simpler plugin to follow – Alex Rabe’s Wordtube plugin. But, it still did a lot more than what I needed.
So, I took Alex’s code and simplified it a lot and came up with a much simpler Hello World Example. The code can be found here. Simply extract this into your wp-content/plugins directory. It will add an RSS icon (just because that’s the real plugin I’m working on – it has nothing to do with Hello World, really) into your TinyMCE editor. Clicking the icon pops open a simple dialog box that asks you to enter your name. A shortcode will then be entered into your post/page. When the post/page is rendered, it will replace the shortcode with “Hello ” and the text that you entered.
I hope this helps someone else muddle through adding a custom button to TinyMCE for WordPress MU.
Daxion
/ November 13, 2008Deanna, I’m so grateful for this, I’ve been struggling to find out how to embed a simple button on the editor. I was able to do so thanks to you.
Thank you! byee!
Hubert
/ November 24, 2008Hi Deanna – thanks very much for publish this, is wonderful ! I’ve been trying to get a really minimal function when I click the button : let’s say add some commented html to the text, like:
But I don’t know how to do it.
Do you know how could I get that ? I’ve tried to read all the different files, but I feel a little overhelmed about it.
Thanks very much for any tip.
Hubert
/ November 24, 2008sorry about that the html got invisible, I mean a typical html comment
ratscull
/ November 25, 2008Hubert,
On line 31 of lib/shortcodes.php, you’d just change the $out variable to whatever you want it to output. This file will override the shortcode that the button puts in.
If you’re looking to have the button actually put html code in the post box, you’d be fiddling with the lines 45-53 in window.php. Make sense?
Hubert
/ November 25, 2008Thanks a lot ratscull, it’s just what I needed ! I’m going to explore the possibilities … thanks again.
Nico
/ December 3, 2008Thank you for this great plugin example !
I am doing a nice plugin at the moment.
My only problem is that I don’t kow how to make a modal/dialog/popup bigger.
I found a parameter into editor_plugin.js but the “white/form” area of the popup is not filling the “blue” area.
screenshot : http://www.freeimagehosting.net/uploads/54c5bca654.gif
ratscull
/ December 3, 2008Hey Nico – thanks, glad to be of help.
You know, I had the same problem with sizing the box, and I don’t recall if II ever figured out the answer… I’ll check when I get a chance and let you know.
Nico
/ December 18, 2008I gave up with the size of the box and I decided to create multiple tabs. And it’s not that bad actually.
My plugin is now ready : http://code.google.com/p/list-child-attachments/
You can see the screenshots : http://code.google.com/p/list-child-attachments/wiki/Screenshots
ratscull
/ December 18, 2008Cool plugin Nico. I’m glad the sample code helped you along!
twincascos
/ January 21, 2009Thanx for the leg up
been looking for this… I’m sure it’ll be a great help.
raj
/ March 8, 2009how to install?
DeannaS
/ March 8, 2009Raj – just extract the directory and place it in the plugins directory. the example doesn’t do a whole lot – but it gives you a framework to work from.
Dean
/ March 19, 2009Thanks for this little demo. I finally figured out how to add a little window popup for my WP People plugin. But, there are still some formatting issues and the regular button issue to figure out.
Marco
/ March 27, 2009Thanks!!!!
Mike Goodstadt
/ March 31, 2009Many thanks! This is really a positive and constructive piece of work. I will tell you when I publish my first plugin
Jens Törnell
/ April 3, 2009Works great, will help me alot!
dimpy
/ May 15, 2009Tanks a lot rat scull, it’s just what I needed ! I’m going to explore the possibilities … thanks again.I gave up with the size of the box and I decided to create multiple tabs. And it’s not that bad actually.I would like to thank you for the efforts you have made in writing this article.
SteveO
/ July 15, 2009Dude that is so appreciated! It’s been bugging me for a couple of hours trying to get this working. On a bit of a new learning curve with php so I well appreciate your sizeable contribution!
Keep up the good work and give me a shout if you need any flash developement doing for a returned favour!
Cheers
)
Mike
/ October 15, 2009Don’t know if I’m stupid or something.
I put this in the /wp-content/plugins/helloworld/
It will ONLY show up on the Admin panel.
If I don’t activate it site wide, it WILL show up as a plugin on a user’s blog, but if I activate it, it won’t stick.
If I activate it site wide, it won’t even show up on the user’s blog. I’ve done the CTRL-F5 thing, but to no avail.
Anyone else got this working with Using WPMU 2.8.4 ?
I’m baffled.
..Mike
DeannaS
/ October 16, 2009I just tested it on a 2.8.4a install of WPMU and it works for me. I activated it at just one blog, for testing purposes. Are you using WPMU or WordPress? I haven’t tested it on WP, as we use WPMU. But, there shouldn’t be anything WPMU specific in it….
Mike
/ October 16, 2009Hi,
FINALLY found the problem.
It was the “Supporter” plugin from http://wpmu.auctiontnt.com
that was not allowing users to activate plugins.
Thanks!
..Mike
Volkan
/ November 19, 2009Thank you very much for publishing your work.
Helloworld’s are always perfect for a quick-start and for use as a skeleton. (As you said, there were no good and up-to-date tutorials, plugins were too complex for a quick start.) I’ve found your work after 6 hours of research, thanks God.
Thank you very much again
deerawan
/ November 24, 2009I’ll try your hello world plugin. Thanks for sharing your knowledge and experience. ^_^
Adriana
/ January 21, 2010Thanks Deanna, this is exactly what I was looking for!
Well, almost…
What if I wanted to get rid of the window and have the button output a predefined shortcode?
I followed the instructions given to Hubert and they work to some extent, but the window’s still there.
Would you mind pointing me in the right direction?
Thank you!
DeannaS
/ January 21, 2010Hm… I’m not sure what you mean. It does put a shortcode in the post. It’s only on viewing that the shortcode gets rendered as something else. If you don’t want the shortcode to render something else, then you just wouldn’t register the shortcode. Make sense?
Adriana
/ January 22, 2010Sorry, my question was confusing… let me put it in different words:
I need a button that will output, let’s say, a sentence. The sentence is always the same, so I don’t need the window to pop-up.
How can I skip the window, so when I click the button it just puts the sentence in the editor?
Thank you for your time, hope it makes sense now… =)
Jerrad
/ February 11, 2010Adriana wants the button to be a simple macro requiring no user input. This is easy enough to do by editing the code, but the larger problem is that this no longer seems to work with 2.9 I install and activate, but get no new button in /wp-admin/options-general.php?page=tinymce-advanced Therefore I’ve been trying to modify it to follow http://codex.wordpress.org/TinyMCE_Custom_Buttons, but still no joy.
Jerrad
/ February 12, 2010Actually, it does work but if one is using TinyMCE Advanced it may not be obvious because 1) it does not show up in the TinyMCE button position editor 2) the code adds the button to the first row of buttons. If that row is already full, the button cannot be seen so it must be added to mce_buttons_2 _3 or _4 instead.
Ruderic
/ April 13, 2010Does this plugin work with the latest version of WordPress?
I activated it and then my entire dashboard was unusable.
christopher
/ September 11, 2010Thanks for the code,
the only problem I’m running into is it only returns a single word, not an entire sentence.
any idea how to add more than a single word into the input field?
Jonas
/ January 1, 201118 Google hours and at last a working s. ! Thanks.