TinyMCE Custom Buttons & Shortcode Example

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.

Advertisements
Previous Post
Leave a comment

33 Comments

  1. Deanna, 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!

    Reply
  2. Hubert

     /  November 24, 2008

    Hi 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.

    Reply
  3. Hubert

     /  November 24, 2008

    sorry about that the html got invisible, I mean a typical html comment 🙂

    Reply
  4. Hubert,
    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?

    Reply
  5. Hubert

     /  November 25, 2008

    Thanks a lot ratscull, it’s just what I needed ! I’m going to explore the possibilities … thanks again.

    Reply
  6. Nico

     /  December 3, 2008

    Thank 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

    Reply
  7. Hey 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.

    Reply
  8. Nico

     /  December 18, 2008

    I 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

    Reply
  9. Cool plugin Nico. I’m glad the sample code helped you along!

    Reply
  10. Thanx for the leg up
    been looking for this… I’m sure it’ll be a great help.

    Reply
  11. raj

     /  March 8, 2009

    how to install?

    Reply
  12. Raj – 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.

    Reply
  13. Thanks 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.

    Reply
  14. Marco

     /  March 27, 2009

    Thanks!!!!

    Reply
  15. Many thanks! This is really a positive and constructive piece of work. I will tell you when I publish my first plugin 🙂

    Reply
  16. Works great, will help me alot!

    Reply
  17. dimpy

     /  May 15, 2009

    Tanks 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.

    Reply
  18. Dude 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 :o)

    Reply
  19. Mike

     /  October 15, 2009

    Don’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

    Reply
    • I 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….

      Reply
  20. Volkan

     /  November 19, 2009

    Thank 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 🙂

    Reply
  21. I’ll try your hello world plugin. Thanks for sharing your knowledge and experience. ^_^

    Reply
  22. Adriana

     /  January 21, 2010

    Thanks 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!

    Reply
    • Hm… 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?

      Reply
      • Adriana

         /  January 22, 2010

        Sorry, 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, 2010

        Adriana 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, 2010

        Actually, 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.

  23. Ruderic

     /  April 13, 2010

    Does this plugin work with the latest version of WordPress?

    I activated it and then my entire dashboard was unusable.

    Reply
  24. christopher

     /  September 11, 2010

    Thanks 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?

    Reply
  25. 18 Google hours and at last a working s. ! Thanks.

    Reply
  1. Idle Brain Time » How to Create a WordPress Plugin Complete with Editor Toolbar Button
  2. [WordPress] AddQuicktagとShortcodes Proの中間が欲しい | モノグサにお灸 | 明日なまけるために、今日はがんばってみる。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: