Configuring Custom Toolbars

Topic Overview

Purpose

This topic describes how to configure custom toolbars in the igHtmlEditor™.

Required background

The following topics are prerequisites to understanding this topic:

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

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

• Configuring Toolbars and Buttons: This topic explains how to configure igHtmlEditor toolbars and buttons.

In this topic

This topic contains the following sections:

• Introduction
• Control Configuration Summary
• Add custom toolbar
• Hide custom toolbar
• Collapse custom toolbar
• Related Content

Introduction

Introduction to the igHtmlEditor custom toolbars

The igHtmlEditor control supports adding custom-defined toolbars. Custom toolbars are very similar to the standard toolbars. They can be visible or hidden, expanded or collapsed.

Custom toolbars currently support two types of controls:

• Button
• Combo

The following screenshot shows an igHtmlEditor with a custom toolbar defined. This toolbar contains a button and a combo:

Control Configuration Summary

The following table lists the configurable aspects of adding a custom button to the igHtmlEditor control. Additional details are available after the table.

Add custom toolbar

Overview

In order to create a custom toolbar, you should define the customToolbars option of the igHtmlEditor. Custom toolbars have all the functionality of the standard toolbars. For example, a custom toolbar can be expanded or collapsed, visible or hidden. Currently custom toolbars can contain button and combo controls. You define these controls in the items property.

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:

Note: You can see that the toolbar has no controls in it. That’s because there are none defined. See Adding a Button to a Custom Toolbar and Adding a Combo Box to a Custom Toolbar sections..

The code snippet below defines a custom toolbar named "customToolbar" with no items in it.

In JavaScript:

<script type="text/javascript">
$("#htmlEditor").igHtmlEditor({
    customToolbars: [
    {
        name: "customToolbar",
        collapseButtonIcon: "ui-igbutton-collapse",
        expandButtonIcon: "ui-igbutton-expand",
        items: [
           //define items here
        ]
    }]
});
<script>

Hide custom toolbar

Overview

In order to hide a custom toolbar you should use the property which is generated like this:

show< 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:

Note: You cannot see the custom toolbar in the screenshot, because it is hidden.

Here is the code:

In JavaScript:

<script type="text/javascript">
$("#htmlEditor").igHtmlEditor({
    showMyCustomToolbar: false,
    customToolbars: [
    {
        name: "myCustomToolbar",
        collapseButtonIcon: "ui-igbutton-collapse",
        expandButtonIcon: "ui-igbutton-expand"
        // toolbar definition here
    }]
});
<script>

Collapse custom toolbar

Overview

In order to collapse the custom toolbar you should set the expanded property to false.

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:

Here is the code:

In JavaScript:

<script type="text/javascript">
$("#htmlEditor").igHtmlEditor({
    customToolbars: [
    {
        name: "customToolbar",
        expanded: false,
        collapseButtonIcon: "ui-igbutton-collapse",
        expandButtonIcon: "ui-igbutton-expand",
        items: [
           //define items here
        ]
    }]
});
<script>

Related Content

Topics

The following topics provide additional information related to this topic.

• Adding a Button to a Custom Toolbar: This topic describes how to add button to custom toolbar in the igHtmlEditor.

• Adding a Combo Box to a Custom Toolbar: This topic describes how to add combo to custom toolbar in the igHtmlEditor.

Samples

The following samples provide additional information related to this topic.

• 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.