Inline Editor in Blazor RichTextEditor

22 Apr 20241 minute to read

The Rich Text Editor provides an option to display a toolbar on demand by enabling the property of RichTextEditorInlineMode.Enable. When the editable text is focused or selected the inline floating toolbar appears. The commands displayed in inline toolbar can be customized by setting RichTextEditorToolbarSettings.Items property.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorInlineMode Enable="true" ShowOnSelection="false" />
    <p>
        The sample is configured with inline mode of editor. Initially, the editor is rendered without a
        <a href='https://blazor.syncfusion.com/home/' target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.
    </p>
</SfRichTextEditor>

Blazor RichTextEditor enabling inline mode

Edit on select

The inline toolbar will appears only for the selected text by enabling the RichTextEditorInlineMode.ShowOnSelection property. Otherwise the inline toolbar will not be appeared after clicking the editable area.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorInlineMode Enable="true" ShowOnSelection="true" />
    <p>
        The sample is configured with inline mode of editor. Initially, the editor is rendered without a
        <a href='https://blazor.syncfusion.com/home/' target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.
    </p>
</SfRichTextEditor>

Blazor RichTextEditor enabling selection

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to know how to render and configure the rich text editor tools.

See also