Skip to main content
All docs
V25.1
  • IBarColorEdit Interface

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

    Namespace: DevExpress.Blazor.Office

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public interface IBarColorEdit :
        IBarButton,
        IBarItemWithImageBase,
        IBarItem,
        IBarItemBase

    Remarks

    The following code snippet 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";
    
        }    
    }
    

    Add a Custom Color Editor

    Run Demo: Toolbar Customization

    See Also