Configuring Toolbars and Buttons

Topic Overview

Purpose

This topic explains how to configure igHtmlEditor™ toolbars and buttons.

Required Background

The following table lists the topics required as a prerequisite to understanding this topic.

• igHtmlEditor Overview: This topic explains the features of igHtmlEditor.

• Adding igHtmlEditor: This topic explains how to add igHtmlEditor to a web page.

In This Topic

This topic contains the following sections:

• Control Configuration Summary
• Hide toolbar
• Collapse toolbar
• Toggle button state
• Set button tooltip
• Configure text options
• Related Content

Control Configuration Summary

Control configuration overview

The following table lists the configurable aspects of the igHtmlEditor control toolbars. Additional details are available after the summary table.

Hide toolbar

Overview

In order to hide a toolbar, set the show <toolbarName> option to false, where <toolbarName> is the name of the toolbar and can have the following values:

• TextToolbar
• FormattingToolbar
• InsertObjectToolbar
• CopyPasteToolbar
• <CustomToolbarName>

In cases where you have a custom toolbar defined, use the show <CustomToolbarName> option to set its visibility state.

Option settings

The following table maps the desired configuration to option settings.

Example

The screenshot below demonstrates how the igHtmlEditor looks as a result of the following settings:

The toolbar area is empty because all the standard toolbars are hidden. Here is the code to accomplish this:

In JavaScript:

$('#htmlEditor').igHtmlEditor({
    showTextToolbar: false,
    showFormattingToolbar: false,
    showInsertObjectToolbar: false,
    showCopyPasteToolbar: false,
    showMyCustomToolbar: false,
    customToolbars: [{
        name: "myCustomToolbar",
        // myCustomToolbar definition
    }]
});

Collapse toolbar

Overview

In order to initially collapse the text toolbar, set the isExpanded option to false. You need to define an object literal in toolbarSettings and set its name option to the name of the toolbar. Then, use the isExpanded option to expand/collapse the toolbar.

Toolbar names:

• textToolbar
• formattingToolbar
• insertObjectToolbar
• copyPasteToolbar
• <customToolbarName>

where <customToolbarName> is the name of the custom toolbar.

Property settings

The following table maps the desired configuration to property settings.

Example

The screenshot below demonstrates how the igHtmlEditor looks as a result of the following settings:

In the example above, the standard toolbars are collapsed. Here is the code to accomplish this:

In JavaScript:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        isExpanded: false
    },
    {
        name: "formattingToolbar",
        isExpanded: false
    },
    {
        name: "insertObjectToolbar",
        isExpanded: false
    },
    {
        name: "copyPasteToolbar",
        isExpanded: false
    }],
    customToolbars: [{
        name: "myCustomToolbar",
        isExpanded: false,
        // myCustomToolbar settings
    }]
});

Toggle button state

Overview

Some of the buttons in the toolbars can be toggled. Toggling options are in the respective toolbar object.

Property settings

The following table maps the desired configuration to property settings.

In the text toolbar object:

In Formatting toolbar:

Note: Only one text alignment option will be applied i.e. they are mutually exclusive.

Example

The screenshot below demonstrates how the igHtmlEditor looks as a result of the following settings:

In the example above, all text toolbar buttons which can be toggled are pressed because they work independently from each other. For the formatting toolbar, only the isJustifycenter option is toggled on. Here is the code which accomplishes this:

In JavaScript:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        isBold: true,
        isItalic: true,
        isUnderline: true,
        isStrikethrough: true
    },
    {
        name: "formattingToolbar",
        isJustifycenter: true,
    }]
});

Set button tooltip

Overview

Each toolbar button has a tooltip. Here is a list of buttons and their respective properties grouped by toolbar.

Note: Tooltips are localizable. If you just want to localize igHtmlEditor the set you locale code in the Infragistics loader..

Option settings

The following table maps the desired configuration to option settings.

In Text toolbar object:

In Formatting toolbar:

In Insert object toolbar object:

In Copy paste toolbar object:

Example

The following example shows how to set buttons tooltips:

In JavaScript:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        boldButtonTooltip: "Bold",
        italicButtonTooltip: "Italic",
        underlineButtonTooltip: "Underline",
        strikethroughButtonTooltip: "Strikethrough",
        decreaseFontButtonTooltip: "Decrease font",
        increaseFontButtonTooltip: "Increase font",
    },
    {
        name: "formattingToolbar",
        justifyleftButtonTooltip: "Align Text Left",
        justifycenterButtonTooltip: "Center",
        justifyrightButtonTooltip: "Align Text Right",
        justifyfullButtonTooltip: "Justify"
    },
    {
        name: "insertObjectToolbar",
        imageButtonTooltip: "Insert Picture",
        linkButtonTooltip: "Insert Hyperlink",
        tableButtonTooltip: "Table",
        addRowButtonTooltip: "Add Row",
        addColumnButtonTooltip: "Add Column",
        removeRowButtonTooltip: "Remove Row",
        removeColumnButtonTooltip: "Remove Column"
    },
    {
        name: "copyPasteToolbar",
        copyButtonTooltip: "Copy",
        cutButtonTooltip: "Cut",
        pasteButtonTooltip: "Paste",
        undoButtonTooltip: "Undo",
        redoButtonTooltip: "Redo"
    }
    ]
});

Configure text options

Overview

You can configure text options for:

• Font family
• Font size
• Text color
• Text background color

Option settings

The following table maps the desired configuration to option settings.

Example

The screenshot below demonstrates how the igHtmlEditor looks as a result of the following settings:

Here is the code which accomplishes this:

In JavaScript:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        selectedFontFamily: "Georgia",
        selectedFontSize: "4",
        selectedFormat: "h2"
    },
    {
        name: "formattingToolbar",
        selectedTextColor: "black",
        selectedTextBackgroundColor: "white"
    },
    ]
});

Related Content

Topics

The following topics provide additional information related to this topic.

• Saving the HTML Content Programmatically: This topic explains how to save igHtmlEditor content to a web server.

• Modifying Contents Programmatically: This topic explains how to modify the igHtmlEditor contents by using the API.

Samples

The following samples provide additional information related to this topic.

• Edit Content: In this forum post example, an initial piece of content provided in the HTML Editor.

• Custom Toolbars and Buttons: This sample demonstrates how the HtmlEditor control works as an email client. This implementation features a custom toolbar where you can add a signature to the message.

• API and Events: This sample demonstrates how to handle events in the Html Editor control and API usage.