Blazor Rich Text Editor — Ribbon and Toolbar Customization (v22.1)

As you may already know, we introduced a series of UI customization options for the DevExpress Blazor Rich Text Editor in our v22.1 release cycle. The following customization options should help you personalize the Rich Text Editor to better address business requirements and end-user needs:

• Hide the Ribbon for read-only documents.
• Display a compact toolbar instead of the large ribbon.
• Hide built-in tabs and items.
• Customize the appearance and behavior of built-in items.
• Create and display new tabs, groups, and items.

Ribbon Customization

The new CustomizeRibbon event allows you to customize the built-in ribbon as needs dictate. Use the event's argument to locate and manage ribbon elements (tabs, groups, and items).

To illustrate what's possible and how you can customize ribbon elements to address specific requirements, let's consider the following use case: a Blazor app that only allows a user to load and save documents to/from specific storage, and only allows an admin to download documents.

First, we'll need to handle the CustomizeRibbon event and access the File tab group (in this instance, the File tab group contains the appropriate items):

<DxRichEdit CustomizeRibbon=OnCustomizeRibbon ... />

void OnCustomizeRibbon(IRibbonModel model) {
    IRibbonTab fileTab = model.Tabs[RichEditRibbonTabNames.File];
    IBarGroup fileCommonGroup = fileTab.Groups[0];
}

Next, we'll need to access the Open and Save buttons and customize associated behavior:

IBarButton saveDocButton = (IBarButton)fileCommonGroup.Items[RichEditBarItemNames.SaveDocument];
// Displays and enables the Save button that is hidden and disabled by default 
saveDocButton.GetVisible = () => { return true; };
saveDocButton.GetEnabled = () => { return true; };
saveDocButton.Click = async () => {
    // Save the document to custom storage here 
};
IBarButton openDocButton = (IBarButton)fileCommonGroup.Items[RichEditBarItemNames.OpenDocument];
openDocButton.Click = async () => {
    // Open a custom dialog to select and load a document here
};

Finally, we'll need to keep the default Download menu within the File tab for the 'admin' and remove this menu for other users:

var user = (await authenticationStateTask).User;
if (user.IsInRole("admin")) {
    if (fileCommonGroup.Items[RichEditBarItemNames.DownloadMenu] == null)
        fileCommonGroup.Items.AddDefaultItem(3, RichEditBarItemNames.DownloadMenu);
}
else
    fileCommonGroup.Items.Remove(RichEditBarItemNames.DownloadMenu);

If you're considering our Rich Text Editor for your next Blazor app or need to customize its Ribbon, please explore the following demo/help topic for more information: Online Demo and online help topic.

Toolbar Customization

The DevExpress Blazor Rich Text Editor v22.1 includes a new built-in toolbar. This toolbar includes our most popular action elements. Set the BarMode property to Toolbar to display the toolbar instead of the default ribbon.

<DxRichEdit BarMode=BarMode.Toolbar />

Toolbar customization is much like ribbon customization. Handle the CustomizeToolbar event and use this event's argument to access and manage toolbar elements — groups and items.

For instance, the following code snippet removes the Print button from the toolbar:

<DxRichEdit BarMode=BarMode.Toolbar CustomizeToolbar=OnCustomizeToolbar .../>

@code {
    void OnCustomizeToolbar(IToolbarModel model) {
        IBarGroup fileGroup = model.Groups[RichEditToolbarGroupNames.File];
        fileGroup.Items.Remove(RichEditBarItemNames.PrintDocument);
    }
}

To learn more, please refer to the following: Online demo - online help topic.

Handle Item Exceptions

The DevExpress Rich Text Editor for Blazor does not handle app-specific exceptions that may arise when a user interacts with built-in/custom items. To handle such exceptions, v22.1 ships with a new BarItemExceptionRaised event.

Event arguments include Exception and Handled properties. Use the Exception property to obtain detailed information about the exception itself. Set the Handled property to true if your code handles the exception and you don't want the Blazor Rich Text Edit to raise the exception again:

<DxRichEdit BarItemExceptionRaised=OnBarItemExceptionRaised .../>

void OnBarItemExceptionRaised(BarItemExceptionEventArgs args) {
    var exeption = args.Exception;
    // Process the exception here 
    args.Handled = true;
}

Your Feedback Matters

Please take a moment to respond to the following survey question.