Enter and Shift-Enter Key Configuration

9 Oct 20251 minute to read

The Rich Text Editor allows to customize the tag that is inserted when pressing the Enter key and Shift + Enter key in the in the editor.

Enter key customization

By default, pressing the Enter key inserts a <p> tag. The Enter key behavior can be customized using the [EnterKey]T(https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnterKey) property. The possible tags are <p>, <div>, and <br>.

When configured, pressing the Enter key inserts the specified tag.

NOTE

The pre tag will be inserted when code format is applied. If the editor content is inside the pre tag, the enter key press will creates <br> tag. Need to press enter key twice to come out of the pre tag.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnterKey="EnterKeyTag.DIV">
    <div>In Rich text Editor, the <kbd>Enter</kbd> key and <kbd>Shift</kbd> + <kbd>Enter</kbd> key actions can be customized using the EnterKey and ShiftEnterKey properties.</div>
</SfRichTextEditor>

Blazor Rich Text Editor Enter key configuration

NOTE

View Sample

Shift-Enter key customization

By default, pressing Shift + Enter inserts a <br> tag. This behavior can be customized using the ShiftEnterKey property. The possible tags are <br>, <p>, and <div>.

When configured, pressing Shift + Enter inserts the specified tag.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor ShiftEnterKey="ShiftEnterKeyTag.DIV">
    <div>In Rich text Editor, the <kbd>Enter</kbd> key and <kbd>Shift</kbd> + <kbd>Enter</kbd> key actions can be customized using the EnterKey and ShiftEnterKey properties.</div>
</SfRichTextEditor>

Blazor Rich Text Editor Shift+Enter key configuration