My new WordPress plugin: Extensible HTML Editor Buttons

A feature of WordPress 3.3 is the new QuickTags API, which makes it possible for developers to add buttons to WordPress’ HTML Editor button bar. My Extensible HTML Editor Buttons plugin uses this API to allow non-developers to easily add buttons. It includes a WYSIWYG settings form for creating new buttons. You can use it to specify the label for your button, the tag you want it to insert, and whether it is a self-closing tag (such as an <img> tag). If you’re comfortable with HTML (and you should be, since you’re using the HTML Editor!), you can also create a custom dialog for your button to launch. This is handy if your tag has multiple attributes (such as class, title, etc). And for plugin developers, it has an API that uses a simple method call where you can register your own button. This is useful if, for example, your plugin uses a shortcode and you’d like to create a button for it, without having to delve into the QuickTags API yourself.

  • Download at wordpress.org
  • Post to Post Links II error: No post found with slug "extensible-html-editor-buttons-wordpress-plugin" here at toppa.com
  • Source code for review at GitHub.com

Something I quickly learned working with the QuickTags API is that it’s fairly limited. It’s really designed just for adding simple buttons. Supporting custom dialogs through it required me to do some jQuery gymnastics – see my buttonController.js file if you want the gory details.

If you’re interested in the QuickTags API itself, the qt.addButton function in wp-includes/js/quicktags.dev.js has detailed explanatory comments, and there’s a good, simple working example in this gist file.

Aficiondos of toppa.com (if there are any such people) may notice this plugin sounds a lot like my old Koumpounophobia plugin. That plugin did a lot of jQuery-based scraping of the HTML Editor to make it possible to add custom buttons, since there didn’t used to be an API, and it ceased to work with the rewrite of QuickTags in WordPress 3.3. Also, the name I gave it was a poor choice (it means “fear of buttons” – totally obscure and a little too clever…). So I took the opportunity to re-write it and give it a much more descriptive name.

3 Comments

  1. Reply
    Jimmy January 19, 2012

    So the update deleted my custom dialogs html file. Nice.

    • Reply
      Mike January 19, 2012

      I’m sorry about that- I didn’t realize the wordpress auto-update for plugins would delete all files from the previous installation. I will need to think of an alternative location, outside the plugin folder.

  2. Reply
    Reinier January 22, 2012

    Hello Mike,

    Thank you for all the great work you have done by making the shashin plugin! When upgrading from version 2 to 3 I got an extra line around the picture. Do you know how I can get rid of this extra line?

Leave a Reply