Nothing But Words

Download
Extensible HTML editor buttons

Support development of Extensible HTML Editor Buttons

Extensible HTML Editor Buttons enhances the WordPress HTML Editor button bar in 5 ways:

1. Provides a WYSIWYG settings form for adding your own custom buttons
2. Provides an example HTML file, which you can follow to add your own custom modal input dialogs for your custom buttons, for setting tag attributes such as style, class, or any attributes you specify
3. Adds two new buttons: div and span, each with their own modal input dialogs, for class, style, etc. attributes (you can disable then if you wish)
4. Gives you the option to replace the standard anchor and image buttons with new versions that provide modal input dialogs with more options (class, style, image width, height, etc.)
5. Provides an API for other plugins to add their own buttons and custom modal dialogs

Installation of Toppa Plugin Libraries for WordPress is required for this plugin. Please download and install it first.

A translation file is included for language localization. If you are bilingual, please contribute a translation!

Need Help?

Please use the comments section in my most recent plugin support post for questions or bug reports.

Want to Contribute?

The latest revisions are always available at GitHub. Code contributions through GitHub are welcome. Stable releases are available at wordpress.org.

Installation

1. Install the Toppa Plugin Libraries for WordPress plugin
2. Install Extensible HTML Editor Buttons in your plugin folder and activate
3. Go to the Extensible HTML Editor Buttons settings menu to configure it, then edit a post or page using the HTML editor to see it in action

Adding your own buttons

To add your own buttons, just go to the Extensible HTML Editor Buttons 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/extensible-html-editor-buttons/Display directory named “custom-dialogs.html” and put all of your custom dialogs there. Use the included custom-dialogs-example.html as a guide. As noted in the file comments, it’s crucial that you follow the naming conventions for the IDs in your form elements. You can see further details in this response I wrote to a support question.

Important note: I’ve belatedly learned that if you’ve created a custom-dialogs.html file, it will be deleted automatically by WordPress when you update to a new version of the plugin. I am working on a solution to this, but in the meantime, keep a copy of your custom-dialogs.html file if you create one.

Adding buttons from your own plugin

If you are a plugin author, and your plugin uses a shortcode, you can register a button for inserting your shortcode. In your PHP code you need to call Buttonable::registerButton(). I recommend doing this from your plugin’s function that is called by WordPress’ register_activation_hook. Here’s the phpDoc for the arguments it takes:

/**
 * For external plugins to register custom buttons. 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
 */

Here’s an example:

register_activation_hook(__FILE__, 'your_activation_function'));

function your_activation_function() {
    if (method_exists('Buttonable', 'registerButton')) {
        return Buttonable::registerButton('blink', 'blink', 'Make annoying blink text', 'ed_blink', 'y', 'y', '/wp-content/plugins/your_plugin/blink_dialog.html');
    }

    return false;
}

You should call the deregister method from your plugin’s deactivation function. Here’s the phpDoc:

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

And here’s an example:

register_activation_hook(__FILE__, 'your_deactivation_function'));

function your_deactivation_function() {
    if (method_exists('Buttonable', 'deregisterButton')) {
        return Buttonable::deregisterButton('blink');
    }
    return false;
}