Inline Editor in Blazor RichTextEditor

11 Aug 20221 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, and also inline toolbar item can be customized by setting RichTextEditorToolbarSettings.Items property.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorInlineMode Enable="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>

Enabling inline mode in Blazor RichTextEditor

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>

Enabling Selection in Blazor RichTextEditor

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