Enter key Configuration in Angular Rich Text Editor Component

16 Jan 202521 minutes to read

Rich Text Editor allows you to customize the behavior of the Enter key and Shift+Enter key combinations. This feature provides flexibility in formatting and structuring content within the editor.

Available Options

The enterKey property accepts the following values:

P (default)
DIV
BR

The shiftEnterKey property accepts the following values:

BR (default)
P
DIV

Enter key Customization

By default, pressing the Enter key in the Rich Text Editor creates a new <p> tag. You can customize this behavior using the enterKey property.

When you customize the Enter key, the editor will create the specified tag when the Enter key is pressed. This configuration also affects the default content structure of the Rich Text Editor.

app.component.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { RichTextEditorModule, RichTextEditorComponent, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
import { DropDownListModule, DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-dropdowns';
@Component({
    imports: [
        RichTextEditorModule,
        DropDownListModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<div class="control-section">
        <table class='api'>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <ejs-dropdownlist id='enterOption' #enterOption
                            [dataSource]='enterOptionData' (change)='enterChange()'
                            [value]='enterValue' [fields]='fields' [popupHeight]='height'
                            [placeholder]='enterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <ejs-richtexteditor id='editor' #editor [height]='editorHeight' [(value)]='value'></ejs-richtexteditor>
    </div>`,
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    @ViewChild('editor')
    public editorObj?: RichTextEditorComponent;
    @ViewChild('enterOption')
    public enterObj?: DropDownListComponent;
    public value: string = "<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>";
    public enterOptionData: { [key: string]: Object }[] = [
        { Text: 'Create a new <p>', Value: 'P' },
        { Text: 'Create a new <div>', Value: 'DIV' },
        { Text: 'Create a new <br>', Value: 'BR' }
    ];

    public enterPlaceHolder: string = 'When pressing the enter key';
    public floatLabel: string = 'Always';
    public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
    public editorHeight = 220;
    public height: string = '200px';
    public enterValue: string = 'P';

    public enterChange(): void {
        if (this.enterObj!.value === 'P') {
            this.editorObj!.enterKey = 'P';
            this.editorObj!.value = `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        } else if (this.enterObj!.value === 'DIV') {
            this.editorObj!.enterKey = 'DIV';
            this.editorObj!.value = `<div>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        } else if (this.enterObj!.value === 'BR') {
            this.editorObj!.enterKey = 'BR';
            this.editorObj!.value = `In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Shift+Enter key Customization

By default, pressing Shift+Enter in the Rich Text Editor inserts a <br> tag. You can customize this behavior using the shiftEnterKey property.

When you customize the Shift+Enter key, the editor will create the specified tag when the key combination is pressed. This configuration also affects the default content structure of the Rich Text Editor.

app.component.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { RichTextEditorModule, RichTextEditorComponent, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
import { DropDownListModule, DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    imports: [
        RichTextEditorModule,
        DropDownListModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<div class="control-section">
        <table class='api'>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <ejs-dropdownlist id='shiftEnterOption' #shiftEnterOption
                            [dataSource]='shiftEnterData' (change)='shiftEnterChange()'
                            [value]='shiftEnterValue' [fields]='fields' [popupHeight]='height'
                            [placeholder]='shiftEnterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <ejs-richtexteditor id='editor' #editor [height]='editorHeight' [(value)]='value'>
        </ejs-richtexteditor>
    </div>`,
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
    @ViewChild('editor')
    public editorObj?: RichTextEditorComponent;
    @ViewChild('shiftEnterOption')
    public shiftEnterObj?: DropDownListComponent;
    public value: string = "<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>";

    public shiftEnterData: { [key: string]: Object }[] = [
        { Text: 'Create a new <br>', Value: 'BR' },
        { Text: 'Create a new <div>', Value: 'DIV' },
        { Text: 'Create a new <p>', Value: 'P' }
    ];

    public shiftEnterPlaceHolder: string = 'When pressing the shift + enter key';
    public floatLabel: string = 'Always';
    public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
    public editorHeight = 220;
    public height: string = '200px';
    public shiftEnterValue: string = 'BR';
    public shiftEnterChange(): void {
        if (this.shiftEnterObj!.value === 'BR') {
            this.editorObj!.shiftEnterKey = 'BR';
        } else if (this.shiftEnterObj!.value === 'DIV') {
            this.editorObj!.shiftEnterKey = 'DIV';
        } else if (this.shiftEnterObj!.value === 'P') {
            this.editorObj!.shiftEnterKey = 'P';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Preventing Enter Key Manipulation

In some cases, you may want to prevent the default Enter key behavior entirely. The Rich Text Editor allows you to intercept and prevent the default action of the Enter key at the editor level by handling the actionBegin event. To ensure that the default behavior is also suppressed at the browser level, you need to call the preventDefault() method on the event object within the event handler. This approach allows for precise control over the editor’s behavior in response to the Enter key press, facilitating the implementation of custom functionality.

app.component.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { RichTextEditorModule, RichTextEditorComponent, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, ActionBeginEventArgs } from '@syncfusion/ej2-angular-richtexteditor';
import { DropDownListModule, DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    imports: [
        RichTextEditorModule,
        DropDownListModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<div class="control-section">
        <table class='api'>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <ejs-dropdownlist id='enterOption' #enterOption
                            [dataSource]='enterOptionData' (change)='enterChange()'
                            [value]='enterValue' [fields]='fields' [popupHeight]='height'
                            [placeholder]='enterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <ejs-richtexteditor id='editor' #editor [height]='editorHeight' (actionBegin)="onActionBegin($event)" [(value)]='value'></ejs-richtexteditor>
    </div>`,
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    @ViewChild('editor')
    public editorObj?: RichTextEditorComponent;
    @ViewChild('enterOption')
    public enterObj?: DropDownListComponent;
    public value: string = "<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>";
    public enterOptionData: { [key: string]: Object }[] = [
        { Text: 'Create a new <p>', Value: 'P' },
        { Text: 'Create a new <div>', Value: 'DIV' },
        { Text: 'Create a new <br>', Value: 'BR' }
    ];

    public enterPlaceHolder: string = 'When pressing the enter key';
    public floatLabel: string = 'Always';
    public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
    public editorHeight = 220;
    public height: string = '200px';
    public enterValue: string = 'P';

    public enterChange(): void {
        if (this.enterObj!.value === 'P') {
            this.editorObj!.enterKey = 'P';
            this.editorObj!.value = `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        } else if (this.enterObj!.value === 'DIV') {
            this.editorObj!.enterKey = 'DIV';
            this.editorObj!.value = `<div>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        } else if (this.enterObj!.value === 'BR') {
            this.editorObj!.enterKey = 'BR';
            this.editorObj!.value = `In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
        }
    }

    public onActionBegin(args: ActionBeginEventArgs): void {
        if (args.requestType === 'EnterAction') {
            args.cancel = true;                                     // to prevent default enter key action in editor level
            (args.originalEvent as KeyboardEvent).preventDefault(); // to prevent default enter key action in browser level
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));