Rich Text Editor Custom Control is always "selected"

[Joseph Tan]

I added a custom tool to the Rich Text Editor, following instructions here: https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar/#custom-tool

  <RichTextEditorCustomToolbarItems>

                        <RichTextEditorCustomToolbarItem Name="Asset">

                            <Template>

                                <SfButton @onclick="InsertAsset" IconCss="fa fa-plane" ></SfButton>

                            </Template>

                        </RichTextEditorCustomToolbarItem>

                    </RichTextEditorCustomToolbarItems>

The tool shows up as permanently selected

Is there a way to make it unselected ? 

[Indrajith Srinivasan]

Hi Joseph, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. The custom tool added is the Syncfusion SfButton component, hence the default button styles are applied. In order to achieve your requirement, we suggest you to override the styles from application end, by using the CssClass property. Check the below code blocks for reference. 

 

 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.RichTextEditor 

 

<SfRichTextEditor> 

    <RichTextEditorToolbarSettings Items="@Tools"> 

        <RichTextEditorCustomToolbarItems> 

            <RichTextEditorCustomToolbarItem Name="Symbol"> 

                <Template> 

                    <SfButton @onclick="ClickHandler" CssClass="rte_custom_tool" ></SfButton> 

                </Template> 

            </RichTextEditorCustomToolbarItem> 

        </RichTextEditorCustomToolbarItems> 

    </RichTextEditorToolbarSettings> 

</SfRichTextEditor> 

 

<style> 

    .rte_custom_tool { 

        background-color: #f8f9fa; 

        color: #212529; 

        border-color: transparent; 

    } 

</style> 

 

@code { 

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 

{ 

        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 

        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 

        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 

        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 

        new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert Symbol" }, 

        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, 

        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen } 

    }; 

 

    private void ClickHandler() 

    { 

        //Perform your action here 

    } 

} 

 

 

Can you please try the above solution and let us know if it meets your requirements? 

 

Regards, 

Indrajith 

[Joseph Tan]

That worked. Thanks

[Indrajith Srinivasan]

Hi Joseph,

Welcome, Please get back to us if you need any further assistance.

Regards,
Indrajith

[Barry]

Any idea why I am getting this error using custome toolbar item?

<RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorQuickToolbarSettings Table="@TableToolbar" Image="@ImageToolbar" Link="@LinkToolbar" Audio="AudioToolbar" Video="VideoToolbar" />
    <RichTextEditorCustomToolbarItems>
        <RichTextEditorCustomToolbarItem Name="RemoveFormatting" >
            <Template>
                <SfButton @onclick="RemoveFormattingClick"><i class="fa fa-eraser" aria-hidden="true"></i></SfButton>
            </Template>
        </RichTextEditorCustomToolbarItem>
    </RichTextEditorCustomToolbarItems>

 

new ToolbarItemModel() { Name = "RemoveFormatting", TooltipText = "Remove All HTML code" },

System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItems.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

[Vinothkumar Yuvaraj]

Hi Joseph,

We have analyzed the shared codes, and we could see that you missed adding the closing tag of the RichTextEditorToolbarSettings component, which caused the reported problem. So, we suggest you ensure to add the below highlighted code to overcome the reported problem.

<SfRichTextEditor>

    <RichTextEditorQuickToolbarSettings Table="@TableQuickToolbarItems" Image="@ImageToolbar" Link="@Link" Audio="AudioQuickToolbarItems" Video="VideoQuickToolbarItems" />

     <RichTextEditorToolbarSettings Items="@Tools">

      <RichTextEditorCustomToolbarItems>

        <RichTextEditorCustomToolbarItem Name="RemoveFormatting">

                    <Template>

                      <SfButton @onclick="RemoveFormattingClick"><i class="fa fa-eraser" aria-hidden="true"></i></SfButton>

                   </Template>

        </RichTextEditorCustomToolbarItem>

      </RichTextEditorCustomToolbarItems>

    </RichTextEditorToolbarSettings>

</SfRichTextEditor>

We have attached a sample for your reference.

Regards,

Vinothkumar

Attachment: BlazorApp1_ae4c4538.zip