Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxHtmlEditor.CustomizeToolbar Event

Allows you to customize the HTML Editor’s toolbar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public EventCallback<IToolbar> CustomizeToolbar { get; set; }

#Parameters

Type Description
IToolbar

The toolbar model.

#Remarks

The HTML Editor displays a built-in toolbar that consists of multiple groups with various items within a group. Handle the CustomizeToolbar event to access and modify the toolbar before the component is initialized.

Note

To access and modify toolbar settings, register the DevExpress.Blazor.Office namespace:

razor
@using DevExpress.Blazor.Office

Html Editor - Toolbar

Run Demo: Html Editor - Overview

#Modify the Group Collection

This section describes how you can access and modify toolbar groups in the HTML Editor.

#Access Groups

The CustomizeToolbar event’s parameter allows you to access the built-in toolbar. Use the toolbar’s Groups property to access the group collection. You can obtain a group by its name or index:

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        // Returns the first group
        IBarGroup firstGroup = toolbar.Groups[0];
        // Returns the "Table" group
        IBarGroup tableGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.Table];
    }
}

#Add Predefined Groups

Add method overloads allow you to add a predefined group with the specified name to the group collection. The HtmlEditorToolbarGroupNames class contains names of all built-in groups. Use properties of this class to obtain predefined group names. Refer to the following section for a list of available groups and corresponding items: Built-in Toolbar Groups and Items.

The default HTML Editor‘s toolbar does not contain the Variable group. The following code snippet adds this group to the toolbar:

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Width="100%"
              Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        var groupName = HtmlEditorToolbarGroupNames.Variable;
        // Inserts the "Variable" group at the end of the group collection
        toolbar.Groups.Add(groupName);
        // Inserts the "Variable" group at the first position in the group collection
        toolbar.Groups.Add(0, groupName);
    }
}

#Add Custom Groups

AddCustomGroup method overloads allow you to create a custom group and add it to the group collection. Add an item to the new group to make the group visible because the HTML Editor hides groups that contain no visible or enabled items.

The following code snippet inserts custom groups and populates them with predefined items:

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        // Inserts a new group at the end of the group collection
        IBarGroup colorGroup = toolbar.Groups.AddCustomGroup();
        colorGroup.Items.Add(HtmlEditorToolbarItemNames.HighlightText);
        colorGroup.Items.Add(HtmlEditorToolbarItemNames.FontColor);
        // Inserts a new group at the first position in the group collection
        IBarGroup imageGroup = toolbar.Groups.AddCustomGroup(0);
        imageGroup.Items.Add(HtmlEditorToolbarItemNames.ShowInsertPictureDialog);
    }
}

#Remove Groups

Remove method overloads allow you to remove a group with the specified name or index from the group collection. To remove all groups from the collection, call the Clear() method.

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        // Removes the first group 
        toolbar.Groups.Remove(0);
        // Removes the "Table" group
        toolbar.Groups.Remove(HtmlEditorToolbarGroupNames.Table);
        // Removes all groups
        toolbar.Groups.Clear();
    }
}

#Modify the Item Collection

This section describes how you can access and modify items within toolbar groups in the HTML Editor.

#Access Items

Use a group’s Items property to access the item collection. An item collection can contain items of the following types:

You can obtain an item by its name or index:

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        IBarGroup fontGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.Font];
        // Access the first item of the "Font" group
        IBarItem firstItem = fontGroup.Items[0];
        // Access the "Font Name" item of the "Font" group
        IBarItem fontNameItem = fontGroup.Items[HtmlEditorToolbarItemNames.FontName];
    }
}

#Add Predefined Items

Add method overloads allow you to add a predefined item with the specified name to the item collection. The HtmlEditorToolbarItemNames class contains names of all built-in items. Use properties of this class to obtain predefined item names. Refer to the following section for a list of available groups and corresponding items: Built-in Toolbar Groups and Items.

The following code snippet populates a custom toolbar group with predefined Highlight Text and Font Color items:

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        IBarGroup colorGroup = toolbar.Groups.AddCustomGroup();
        // Inserts the "Highlight Text" item at the end of the item collection
        colorGroup.Items.Add(HtmlEditorToolbarItemNames.HighlightText);
        // Inserts the "Font Color" item at the first position in the item collection
        colorGroup.Items.Add(0, HtmlEditorToolbarItemNames.FontColor);
    }
}

#Remove Items

Remove method overloads allow you to remove an item with the specified name or index from the item collection. To remove all items from the collection, call the Clear() method.

Razor
@using DevExpress.Blazor.Office

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        IBarGroup insertElementGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.InsertElement];
        // Removes the first item
        insertElementGroup.Items.Remove(0);
        // Removes the "Insert Code Block" item
        insertElementGroup.Items.Remove(HtmlEditorToolbarItemNames.InsertCodeBlock);
        // Removes all items
        insertElementGroup.Items.Clear();
    }
}

#Customize Groups and Items

The HTML Editor allows you to customize toolbar groups and items. The following code snippet changes the icon of the Font group and specifies the text and tooltip for the Font Name item:

Razor
<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        IBarGroup fontGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.Font];
        fontGroup.IconUrl = "/images/text.png";
        IBarItem fontNameItem = fontGroup.Items[HtmlEditorToolbarItemNames.FontName];
        fontNameItem.Text = "Font Name:";
        fontNameItem.Tooltip = "Changes the selected text's font name.";
    }
}

#Built-in Toolbar Groups and Items

The table below lists built-in toolbar groups and their items.

Group Name Item Names Toolbar Icons
UndoRedo Undo
Redo
Html Editor - Toolbar UndoRedo Group
Font FontName
FontSize
FontBold
FontItalic
FontStrikethrough
FontUnderline
FontColor
HighlightText
ClearFormatting
FontSubscript
FontSuperscript
Html Editor - Toolbar Font Group
InsertElement ShowHyperlinkDialog
ShowInsertPictureDialog
InsertCodeBlock
InsertBlockquote
Html Editor - Toolbar Insert Element Group
Paragraph ParagraphAlignmentLeft
ParagraphAlignmentCenter
ParagraphAlignmentRight
ParagraphAlignmentJustify
BulletList
NumberedList
IncreaseIndent
DecreaseIndent
ParagraphStyles
Html Editor - Toolbar Paragraph Group
Table ShowInsertTableDialog
InsertTableRowAbove
InsertTableRowBelow
InsertTableColumnToTheLeft
InsertTableColumnToTheRight
InsertTableHeaderRow
DeleteTable
DeleteTableRow
DeleteTableColumn
Html Editor - Toolbar Table Group
Variable InsertVariableField Html Editor - Toolbar Variable Group
See Also