Nothing But Words

Koumpounophobia is powered by jQuery, and enhances the WordPress HTML Editor button bar in 5 ways:

1. It replaces the anchor and image buttons with new versions that provide modal input dialogs with more options (image width, height, etc.)
2. It adds two new buttons: div and span, each with their own modal input dialogs (for class, style, etc. attributes)
3. It lets you add your own buttons and create custom modal dialogs for them
4. It provides an API for other plugins to add buttons and custom modal dialogs
5. You can control which Koumpounophobia-based buttons will appear in the button bar

The Koumpounophobia Settings menu lets you control which buttons appear on the button bar, and provides a form for creating your own buttons. It also provides instructions for creating custom modal dialogs. Koumpounophobia’s display/dialogs.html file provides a good set of examples for creating your own modal dialogs.

My Post-to-Post Links II plugin uses Koumpounophobia to add its own button to the HTML Editor. That plugin is a good example to work from if you’re a plugin author.

If you’re wondering about the name, Koumpounophobia is a phobia of buttons. I figured it was appropriate since there haven’t been any improvements to the WordPress HTML Editor in years.

Koumpounophobia is internationalized, and currently included a Russian translation, courtesy of Fatcow. Please contribute a translation if you can – here’s how.

Help!

Please use the comments section in my most recent blog post about Koumpounophobia for questions.

Installation

Download the zip file, unzip it, and copy the “koumpounophobia” folder to your plugins directory. Then activate it from your plugin panel. After successful activation, you’ll see some changes to your HTML Editor buttons bar. You can use the Koumpounophobia Settings menu to control the changes to your button bar.

Adding Your Own Buttons

To add your own buttons, just go to the Koumpounophobia Settings Menu and follow the instructions. If you want to create your own custom input dialogs, you need to create a file in your plugins/koumpounophobia/display directory named “custom_dialogs.html” and put all of your custom dialogs there. Follow the code in dialogs.html as an example. It’s crucial that you closely follow the naming conventions for the IDs in your form elements. For example, your outermost div must have the name kphobia_yourButtonName_dialog. Note that the form input field names are different from their IDs. Also, the names you give to your input fields will be used as the attribute names in your tag (the input field names are intentionally different from their IDs). For example, if you have an input with the name “style”, then your tag will get the attribute “style”.

Adding Buttons From Your Plugin

To add buttons from another plugin, you need to call Kphobia::registerButton() from your function that’s triggered by the register_activation_hook. Here’s the phpDoc on the arguments it takes:

/**
 * For external plugins to register custom buttons with Kphobia. Registered
 * buttons are automatically set to active.
 *
 * @param string $handle the name to use when referring to the custom button (eg: anchor)
 * @param string $tag the tag to insert, not including delimiters (eg: a)
 * @param string $title the title attribute for the button tag (eg: add anchor tag)
 * @param string $id the id attribute for the button tag; should start with ed_ (eg: ed_anchor)
 * @param string $self_close 'y' if a self-closing tag (eg: an image tag) 'n' otherwise
 * @param string $shortcode 'y' if a WordPress shortcode tag, 'n' if an html tag
 * @param string $path optional path to the html file for the button's dialog, relative to the WP
 *     base dir (eg: /wp-content/plugins/your_plugin/anchor_dialog.html)
 * @static
 * @access public
 */

And here’s an example from my Post-to-Post Links II plugin (you’ll want to substitute your own value for P2P_DIR, which should indicate the path to your modal dialog HTML file, if you’re using one, relative to the main plugin directory; and substitute your own localization handle for P2P_L10N_NAME) :

function install() {
    if (method_exists(Kphobia, registerButton)) {
        $dialog_path = '/' . PLUGINDIR .  '/' . basename(P2P_DIR) . '/display/button_dialog.html';
        Kphobia::registerButton('p2p', 'p2p', __('Add post-to-post Link', P2P_L10N_NAME), 'ed_p2p', 'y', 'y', $dialog_path);
    }
}

You should call the deregister method from your plugin’s uninstall function (not to be confused with deactivation – you do have an uninstall function, don’t you?). Here’s the phpDoc:

/**
 * For external plugins to deregister custom buttons with Kphobia.
 *
 * @param string $handle the name to use when referring to the custom button (eg: anchor)
 * @static
 * @access public
 */

And here’s an example from Post-to-Post Links II:

function uninstall() {
    if (method_exists(Kphobia, deregisterButton)) {
        return Kphobia::deregisterButton('p2p');
    }
    return false;
}

Known Issues

I’ve noticed the HTML Editor is “jumpy” in Internet Explorer 8. From what I can tell, this is not related to Koumpounophobia. The scroll position within the editor will sometimes change randomly even without Koumpounophobia installed.

If you notice bugs using Koumpounophobia with your browser please post a comment to my most recent Koumpounophobia post.

Change Log

• 0.4
  • Fixed scroll position bug with Firefox 3 – the editor’s scroll position will now stay in place when using a Koumpounophobia modal dialog.
  • Works with IE 7 and 8: now inserts tags at the cursor position (previously, they were always inserted at the top of the editor, regardless of the cursor position).
• 0.3
  • Got auto width and height working for modal dialogs
  • Can now update options for its own buttons on reactivation if there are changes
• 0.2
  • Added jQuery UI Dialog for controlling the input dialogs
  • Fixed bug with buttons for self closing tags that don’t use an input dialog (the button mistakenly tried to add a closing tag)
  • Simplified the HTML and CSS for the form input dialogs
• 0.1 – Beta release

• 
•  Print