Enter and Shift-Enter Key Configuration

23 Aug 20231 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 Rich Text Editor.

Enter key customization

By default, the <p> tag is created while pressing the Enter key. The Enter key can be customized by using the EnterKey property. The possible tags that can be used to customize the Enter key are <p>, <div>, and <br>.

When the Enter key is customized with any of the above possible values, pressing the Enter key in the editor will create a new tag that is configured.

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.

CSHTML

@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>

NOTE

View Sample

Shift-Enter key customization

By default, the <br> tag is created while pressing the Shift + Enter key. The Shift + Enter key can be customized by using the ShiftEnterKey property. The possible tags that can be used to customize the Shift + Enter key are <br>, <p>, and <div>.

When the Shift + Enter key is customized with any of the above possible values, pressing the Shift + Enter key in the editor will create a new tag that is configured.

CSHTML

@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>