Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity

Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity

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

<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

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
Customizing the Enter key configuration in the Angular Rich Text Editor

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

<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

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
Customizing the Shift+Enter key configuration in the Angular Rich Text Editor

GitHub reference

For more details, check out the example for customizing the Enter and Shift+Enter key configurations in the Angular Rich Text Editor.

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. 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 forumsupport portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed