Add Custom jHtmlArea Toolbar Button

Not only are the "built-in" toolbar buttons availabe, but completely custom toolbar buttons can be defined. This can be useful for extending the editor with any functionality desired.

Add Custom Toolbar Button

To add a custom toolbar button, instead of specifying the button to use by name, an object literal is passed instead.

Here's an example of the object literal required:

{
    // The CSS class used to style the <a> tag of the toolbar button
    css: 'custombutton',

    // The text to use as the <a> tags "Alt" attribute value
    text: 'Custom Button Tooltip / Description Value',

    // The callback function to execute when the toolbar button is clicked
    action: function (btn) {
        // 'this' = jHtmlArea object
        // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

        // Take some action or do something here
    }
}

Now that the required object literal has been shown, here's an example of it being used along with other toolbar buttons to build a custom toolbar set:

$("textarea").htmlarea({
    // Override/Specify the Toolbar buttons to show
    toolbar: [
        ["html"], ["bold", "italic", "underline", "|", "forecolor"],
        ["h1", "h2", "h3", "h4", "h5", "h6"],
        ["link", "unlink", "|", "image"],
        [
            {
                // The CSS class used to style the <a> tag of the toolbar button
                css: 'custombutton',

                // The text to use as the <a> tags "Alt" attribute value
                text: 'Custom Button Tooltip / Description Value',

                // The callback function to execute when the toolbar button is clicked
                action: function (btn) {
                    // 'this' = jHtmlArea object
                    // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

                    // Take some action or do something here
                }
            }
        ]
    ]
});

Perform Basic Actions from a Custom Toolbar Button

The jHtmlArea API provides a number of methods or actions that can be performed on the editor from within the custom toolbar buttons handler.

Here are a couple examples:

{
    css: "custombutton",
    text: "Custom Toolbar Button",
    action: function(btn) {

        // Paste some specific HTML / Text value into the Editor
        this.pasteHTML("<p></p>");

        // Get the currently selected HTML / Text within the Editor
        var s = this.getSelectedHTML();

        // Set the current selection to Bold
        this.bold();

        // Set the current selection to Italic
        this.italic();

        // Set the current selection to Underline
        this.underline();

        // Center Justify the current selection
        this.justifyCenter();

        // Indent the current selection
        this.indent();

        // Insert horizontal rule or <hr> tag
        this.insertHorizontalRule();

        // Insert an Image by URL
        this.image("http://domain/image.png");

        // Set the Forecolor / Text Color of the current selection
        this.forecolor("#336699");

        // Get the Full HTML that's contained within the Editor
        var html = this.toHtmlString();
    }
}

Further documentation is available within the Modify Editor Programatically using JavaScript article.