Enter and Shift-Enter Key’s Customization in Blazor RichTextEditor

11 Jan 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.

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

    Blazor Enter Key Configuration Demo

    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.

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