Enter and Shift-Enter Key Configuration

11 Aug 20221 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 tag created while pressing 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.

The pre tag will be inserted when code format is applied, enter key press will created only <br> tag if the editor content is inside the pre 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>

Enter key confuguration in Blazor RichTextEditor

View Sample

Shift-Enter key customization

By default, the <br> tag is created while pressing the Shift + Enter key. The tag created while pressing 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 possible values, pressing the Shift + Enter key in the editor will create a new tag that is configured.

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

Shift + Enter key confuguration in Blazor RichTextEditor