Rich Text Editor content not filling and toolbar not working

[James McGinley]

The example text isn't displaying in the text editor, I can add text to the editor but unable to format it using the toolbar.

I am using a shortened version of the example code from the getting start guide: https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-webapp

I have linked the stylesheet and the javascript in App.Razor.

Any help would be appreciated

@rendermode InteractiveServer
<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />


    <p><b> Key features:</b></p>
    <ul>
        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
        <li><p> Capable of handling markdown editing.</p></li>
        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
        <li><p> Provides a fully customizable toolbar.</p></li>
        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
        <li><p> Allows preview of modified content before saving it.</p></li>
    </ul>
</SfRichTextEditor>


@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.StrikeThrough },


    };
}

Attachment: Screenshot_20250626_220124_243aac13.png

[Vinitha Jeyakumar]

Hi James McGinley,

We have created a sample project in a Blazor web app by including the Syncfusion RichTextEditor component for your reference.

Please refer to the attached sample,

We suspect that the issue may have occurred due to the improper styles and script references in the App.razor file. So, make sure that you have referred to the script and style references properly to avoid such issues.

https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-webapp#add-stylesheet-and-script-resources

Please let us know if it doesn't resolve your reported issue.

Regards,

Vinitha

Attachment: BlazorWebApp_(2)_b94827e4.zip

[Buckland Frank]

Using Rich Text Editor Correctly

Your component should look something like this:

razor

Copy

Edit

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>

<p>This is some rich text content.</p>

</SfRichTextEditor>

[James McGinley]

Found the issue, I had uninstalled the general package (SyncFusion.Blazor) and replaced it with the specific package (SyncFusion.Blazor.RichTextEditor)

[Vinitha Jeyakumar]

Hi James McGinley,

We are glad that your issue has been resolved. Please get back to us if you need any further assistance.

Regards,

Vinitha