Configure jHtmlArea Toolbar Buttons - crpietschmann/jHtmlArea GitHub Wiki

jHtmlArea makes it extremely simple to define custom toolbar button sets. This allows for any combination or subset of toolbar buttons to be displayed; if the default set isn't necessary or desired.

Here's an example that turns a <textarea> with "id='txtCustomHtmlArea" into a jHtmlArea Editor and sets specific Toolbar buttons to be displayed:

$('#txtCustomHtmlArea'}.htmlarea({
toolbar: [
        "bold", "italic", "underline",
        "|",
        "h1", "h2", "h3", "h4", "h5", "h6",
        "|",
        "link", "unlink"
    ]
});

This code tells the editor to only show the 11 butons specified. The items with the pipe "|" are items that tell the editor to add a separator to give visual grouping to the buttons being displayed.

The toolbar buttons can also be visually grouped to allow for related buttons separated from others. To do this, just set the "toolbar" option to an array of arrays. Each Array within will be displayed as a separate group.

Here's an example that take the above custom toolbar example and separates the related buttons into groups instead of just placing a toolbar separator between them.

$('#txtCustomHtmlArea'}.htmlarea({
toolbar: [
        ["bold", "italic", "underline"],
        ["h1", "h2", "h3", "h4", "h5", "h6"],
        ["link", "unlink"]
    ]
});

The below table contains a list of all the "built-in" toolbar buttons that can be used.