Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity
Tags: angular, javascript, webdev, productivity
Published: 2022-02-12 13:50:35

---
title: Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity
published: true
date: 2022-02-11 11:55:51 UTC
tags: angular, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/customize-the-enter-and-shiftenter-keys-in-angular-rich-text-editor-for-better-productivity.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customize-the-Enter-and-ShiftEnter-Keys-in-Angular-Rich-Text-Editor-for-Better-Productivity-672x372.png
---

As a web developer, you might feel annoyed if you have to write code for the same element frequently. In that scenario, we can customize the behavior of the keyboard keys to create those elements more easily. This will help us speed up the development process and enhance our productivity.

The Syncfusion [Angular Rich Text Editor](https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor "Angular Rich Text Editor") is a feature-rich WYSIWYG HTML editor. It allows users to easily customize content. It has a variety of tools to edit and format rich content and return valid HTML markup or Markdown (MD) content. You can also insert images, links, tables, and lists with modular architecture.

In this blog, we focus on customizing the default behavior of element (tag) creation while pressing the Enter and Shift+Enter keys in the Angular Rich Text Editor.

## Set up the Angular Rich Text Editor

First, refer to the [Getting started with Angular Rich Text Editor ](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/ "Getting started with Angular RichTextEditor component documentation")documentation. This will help you set up the Angular environment and add the Angular Rich Text Editor component to your application.

## Customize the Enter key configuration

By default, an element will be created and inherited from the previous sibling element when the Enter key is pressed within the contenteditable element of any editor.

We can customize this default behavior in our Angular Rich Text Editor using the **enterKey** property. The tags that can be used to customize are \<p\>, \<div\>, and \<br\>. By default, the <p> element will be created when the Enter key is pressed.

Refer to the following code example. Here, we have rendered a dropdown list component to switch the custom options of the **enterKey** property easily.

### app.component.html

```html
<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='defaultRTE' #defaultRTE [height]='rteHeight'>
    <ng-template #valueTemplate>
     <p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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>
    </ng-template>
 </ejs-richtexteditor>
</div>
```

### app.component.ts

```js
import { Component, ViewChild} from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import {DropDownListComponent, FieldSettingsModel} from '@syncfusion/ej2-angular-dropdowns';
import { FloatLabelType } from '@syncfusion/ej2-inputs';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls:['app.component.css'],
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
 
@ViewChild('defaultRTE')
public rteObj: RichTextEditorComponent;
 
@ViewChild('enterOption')
public enterObj: DropDownListComponent;
 
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: FloatLabelType = 'Always';
public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
public rteHeight = 220;
public height: string = '200px';
public enterValue: string = 'P';
 
public enterChange(): void {
 if (this.enterObj.value === 'P') {
  this.rteObj.enterKey = 'P';
  this.rteObj.value = `<p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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.rteObj.enterKey = 'DIV';
  this.rteObj.value = `<div>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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.rteObj.enterKey = 'BR';
  this.rteObj.value = `In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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>`;
  }
 }
}
```

###  Output screenshot

![Customizing the Enter key configuration in the Angular Rich Text Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Enter-key-configuration-in-the-Angular-Rich-Text-Editor.png)
<figcaption>Customizing the Enter key configuration in the Angular Rich Text Editor</figcaption>

## Customize the Shift+Enter key configuration

By default, the <br> element will be created when the Shift+Enter keys are pressed within the contenteditable element of any editor. We can customize this default behavior in our Angular Rich Text Editor using the **shiftEnterkey** property. The possible tags that can be used to customize it are \<br\>, \<p\>, \<div\>.

Refer to the following code example. Here, we have rendered a dropdown list component to switch the custom options of the **shiftEnterkey** property easily.

### app.component.html

```html
<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>
    <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='defaultRTE' #defaultRTE [height]='rteHeight'>
   <ng-template #valueTemplate>
      <p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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>
   </ng-template>
 </ejs-richtexteditor>
</div>
```

### app.component.ts

```js
import { Component, ViewChild} from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import {DropDownListComponent, FieldSettingsModel} from '@syncfusion/ej2-angular-dropdowns';
import { FloatLabelType } from '@syncfusion/ej2-inputs';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls:['app.component.css'],
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
 
@ViewChild('defaultRTE')
public rteObj: RichTextEditorComponent;
 
@ViewChild('enterOption')
public enterObj: DropDownListComponent;
 
@ViewChild('shiftEnterOption')
public shiftEnterObj: DropDownListComponent;
 
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 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 enterPlaceHolder: string = 'When pressing the enter key';
public shiftEnterPlaceHolder: string = 'When pressing the shift + enter key';
public floatLabel: FloatLabelType = 'Always';
public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
public rteHeight = 220;
public height: string = '200px';
public enterValue: string = 'P';
public shiftEnterValue: string = 'BR';
 
public enterChange(): void {
  if (this.enterObj.value === 'P') {
    this.rteObj.enterKey = 'P';
    this.rteObj.value = `<p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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.rteObj.enterKey = ‘DIV’;
    this.rteObj.value = `<div>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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.rteObj.enterKey = ‘BR’;
    this.rteObj.value = `In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. 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 shiftEnterChange(): void {
  if (this.shiftEnterObj.value === 'BR') {
  this.rteObj.shiftEnterKey = 'BR';
  } else if (this.shiftEnterObj.value === 'DIV') {
    this.rteObj.shiftEnterKey = 'DIV';
  } else if (this.shiftEnterObj.value === 'P') {
    this.rteObj.shiftEnterKey = 'P';
  }
 }
}
```

### Output screenshot

![Customizing the Shift+Enter key configuration in the Angular Rich Text Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-ShiftEnter-key-configuration-in-the-Angular-Rich-Text-Editor.png)
<figcaption>Customizing the Shift+Enter key configuration in the Angular Rich Text Editor</figcaption>

## GitHub reference

For more details, check out the example for [customizing the Enter and Shift+Enter key configurations in the Angular Rich Text Editor](https://github.com/SyncfusionExamples/ej2-angular-rich-text-editor-enter-key-config "Customizing the Angular Rich Text Editor Enter and Shift+Enter keys configurations GitHub demo").

## Conclusion

Thanks for reading! I hope you now have a clear idea of how to customize the Enter and Shift+Enter keys in the Syncfusion [Angular Rich Text Editor](https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor "Angular Rich Text Editor"). This will help us reduce our development time and workload and enhance our productivity.

You can use our Angular Rich Text Editor to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, and messaging applications. Try it out and leave your feedback in the comments section below!

Also, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Syncfusion Feedback Portal"). As always, we are happy to assist you!

## Related blogs

- [Top 10 Features in Angular 13 Every Developer Should Know](https://www.syncfusion.com/blogs/post/top-10-features-in-angular-13-every-developer-should-know.aspx "Top 10 Features in Angular 13 Every Developer Should Know blog")
- [Entering Invalid Dates Just Got Better in Angular Apps](https://www.syncfusion.com/blogs/post/entering-invalid-dates-is-not-possible-anymore-in-angular-apps.aspx "Entering Invalid Dates Just Got Better in Angular Apps blog")
- [How to Update Data Without Rerendering an Entire Grid in Angular](https://www.syncfusion.com/blogs/post/how-to-update-data-without-rerendering-an-entire-grid-in-angular.aspx "How to Update Data Without Rerendering an Entire Grid in Angular blog")
- [Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App](https://www.syncfusion.com/blogs/post/convert-asp-net-core-with-angular-app-to-desktop-app.aspx "Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App blog")