This project has moved and is read-only. For the latest updates, please go here.

Configure jHtmlArea Toolbar Buttons

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.

Create Toolbar Button Groups

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"]
    ]
});

Available Toolbar Buttons

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

Name Description
html Allows for the user to toggle between WYSIWYG and Raw HTML views within the editor.
| Created a toolbar separator
bold Surrounds the selected text with <b> or <strong> tags (which one depends on the browser used.)
italic Surrounds the selected text with <i> or <em> tags (which one depends on the browser used.)
underline
strikethrough Strikes out the currently selected text with <strike> tags
p Creates a new paragraph "<p>"
h1 Surrounds the selected text with a <h1> tag.
h2 Surrounds the selected text with a <h2> tag.
h3 Surrounds the selected text with a <h3> tag.
h4 Surrounds the selected text with a <h4> tag.
h5 Surrounds the selected text with a <h5> tag.
h6 Surrounds the selected text with a <h6> tag.
image Allows for an image to be inserted into the current caret location.
link Adds a hyperlink <a> to the currently selected text.
unlink Removes the hyperlink from the currently selected text.
orderedList Creates an Ordered List <ol>
unorderedList Creates an Unorderd List <ul>
superscript Surrounds the selected text with <sup> tags.
subscript Surrounds the selected text with <sub> tags.
indent Indents the selected text.
outdent Outdents the selected text.
justifyleft Left justifies the selected text.
justifycenter Centers the selected text.
justifyright Right justifies the selected text.
increasefontsize Increases the font size of the selected text by one value.
decreasefontsize Decreases the font size of the selected text by one value.
forecolor Allows for the "color" of the selected text to be set.
horizontalrule Adds a horizontal rule <hr> tag to the current caret location.

Last edited May 5, 2012 at 9:16 PM by crpietschmann, version 9

Comments

MateuszTrN Jul 13, 2014 at 6:30 PM 
Is there a possibility just to remove 'html source' button and make all the others available? or I just have to list all of them except unwanted one?

Gabor85 Jun 2, 2014 at 8:57 AM 
I can't found solution for this:

Show the formatted text (not like: div><div><b><i><u>...) with not visible toolbar and readonly textarea.
How can I do this ?

looneygiraffe Aug 7, 2013 at 4:49 PM 
This is great, just what I was looking for. A slight typo when you want to customise the menu options.

'}' in first line should be a ')' after Area'

$('#txtCustomHtmlArea'}.htmlarea({

should be

$('#txtCustomHtmlArea').htmlarea({

FunkyMonk81 Jul 9, 2013 at 2:56 PM 
I dont see the toolbar when I run example above..what gives?

angelxmoreno Dec 22, 2012 at 12:14 AM 
Cut, Copy, Paste are missing from the list. I assume those are the names of the buttons?

JohnSmith564 Nov 11, 2012 at 10:25 AM 
This is great, but why is there no "font-type" or "font-family" button? This is a basic requirement for rich text editors.