DxHtmlEditor.CustomizeToolbar Event

Allows you to customize the HTML Editor’s toolbar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

@using DevExpress.Blazor.Office

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:

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

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

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

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

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

• Button
• Checkable button
• Color edit
• Combo box
• Drop down
• Spin edit

You can obtain an item by its name or index:

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

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

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

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

<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.";
    }
}