IBarColorEdit Interface

A color editor on the Rich Text Editor‘s ribbon or toolbar.

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IBarColorEdit :
    IBarButton,
    IBarItemWithImageBase,
    IBarItem,
    IBarItemBase

Related API Members

The following members return IBarColorEdit objects:

• BarItemCollection.AddCustomColorEdit(Func<Color>, Func<Color, Task>, Func<Task>)
• BarItemCollection.AddCustomColorEdit(Int32, Func<Color>, Func<Color, Task>, Func<Task>)

Remarks

The code below creates a custom color editor that allows users to change the font color for selected text.

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

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        BarGroupCollection groups = toolbar.Groups;
        groups.Clear();
        AddFormattingGroup(groups);
        // ...
    }

    void AddFormattingGroup(BarGroupCollection groups) {
        IBarGroup formattingGroup = groups.AddCustomGroup();
        // ...

        // Adds a custom color editor
        IBarColorEdit fontColor = fontDropDown.Items.AddCustomColorEdit(
            () => currentColor.HasValue && !currentColor.Value.IsEmpty ? currentColor.Value : System.Drawing.Color.Black,
            (value) => Task.FromResult(currentColor = value),
            async () => {
                TextSpan span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
                await span.ChangePropertiesAsync(p => p.ForegroundColor = currentColor);
            }
        );
        fontColor.Tooltip = "Change the font color.";
        fontColor.Text = "Font Color";

    }    
}

Run Demo: Toolbar Customization