Table of Contents
Table of Contents
Customizing Named Styles, Font Name and Font Size Drop Downs

Overview

Named styles, font name and font size drop downs are special drop down items that can be placed on the toolbar.

Named Styles

One or more named styles can be defined in the editor's Styles collection. Each style is represented by an EditorStyle object, which exposes the following key properties:

Property Remarks
CssClass The CSS class associated with the style.
TagName The HTML tag name (such as H1, H2, etc) associated with the style.
Name The name of the style.
FullParagrah Whether the style should be applied to full paragrahs or can be applied to inline text segments.

To include the named style list on a toolbar, includes the pre-defined Styles command in your toolbar, or add the following snippet in your toolbar's Items collection if you use custom toolbars:

ASPX
Copy 
<eo:ToolBarItem ToolTip="Styles" CommandName="Styles" Type="Custom">
    <CustomItem>
        <asp:DropDownList runat="server" ID="StyleDropDown"></asp:DropDownList>
    </CustomItem>
</eo:ToolBarItem>

Since it's a custom tool bar item, it can include any other valid HTML or server controls. Additional properties, such as Width, can also be applied on the DropDownList control.

At runtime, the editor automatically fills the drop down list based on the Styles collection. User can then select from the drop down to apply them to selected text.

Font Names

To include the font name list on a toolbar, includes the pre-defined Fonts command in your toolbar, or add the following snippet in your toolbar's Items collection if you use custom toolbars:

ASPX
Copy 
<eo:ToolBarItem ToolTip="Fonts" CommandName="Fonts" Type="Custom">
    <CustomItem>
        <asp:DropDownList runat="server" ID="FontDropDown"></asp:DropDownList>
    </CustomItem>
</eo:ToolBarItem>

Since it's a custom tool bar item, it can include any other valid HTML or server controls. Additional properties, such as Width, can also be applied on the DropDownList control.

Property FontNames can be used to to customize the list of font names to be displayed. The editor displays a list of all available font names if this property is not set.

Font Sizes

To include the font size list on a toolbar, includes the pre-defined FontSizes command in your toolbar, or add the following snippet in your toolbar's Items collection if you use custom toolbars:

ASPX
Copy 
<eo:ToolBarItem ToolTip="Font Sizes" CommandName="FontSizes" Type="Custom">
    <CustomItem>
        <asp:DropDownList runat="server" ID="FontSizeDropDown"></asp:DropDownList>
    </CustomItem>
</eo:ToolBarItem>

Since it's a custom tool bar item, it can include any other valid HTML or server controls. Additional properties, such as Width, can also be applied on the DropDownList control.

Property FontSizes can be used to customize the list of font sizes to be displayed. The editor uses a default list if this property is not set.