Enter and Shift-Enter Key Configuration

1 Jun 20262 minutes 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 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.

RAZOR

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnterKey="EnterKeyTag.DIV">
    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
    <p>In Rich Text Editor, the Enter key behavior can be customized using the <code>EnterKey</code> property.The possible tags are <code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, and <code>&lt;br&gt;</code>.This sample is configured with <code>EnterKey</code> set to <b>DIV</b>.</p>
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
    };
}

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.

RAZOR

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor ShiftEnterKey="ShiftEnterKeyTag.DIV">
    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
    <p>In Rich Text Editor, the Shift Enter key behavior can be customized using the <code>ShiftEnterKey</code> property.The possible tags are <code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, and <code>&lt;br&gt;</code>.This sample is configured with <code>Shift EnterKey</code> set to <b>DIV</b>.</p>
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
    };
}

NOTE

View Sample