Enter key Configuration in React Rich Text Editor Component

27 Feb 202524 minutes to read

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.

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.

[Class-component]

/**
 * Rich Text Editor - Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    rteObj;
    rteValue = `<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>`;
    enterList;
    popupHeight = '200px';
    enterValue = "P";
    enterPlaceholder = "When pressing the enter key";
    fields = { text: "text", value: "value" };
    enterData = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];
    enterChange = () => {
        if (this.enterList.value === 'P') {
            this.rteObj.enterKey = 'P';
            this.rteObj.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.enterList.value === 'DIV') {
            this.rteObj.enterKey = 'DIV';
            this.rteObj.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.enterList.value === 'BR') {
            this.rteObj.enterKey = 'BR';
            this.rteObj.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>`;
        }
    };
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={this.enterData} ref={(dropdownlist) => { this.enterList = dropdownlist; }} fields={this.fields} change={this.enterChange.bind(this)} value={this.enterValue} popupHeight={this.popupHeight} placeholder={this.enterPlaceholder} floatLabelType="Always"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height={250} value={this.rteValue}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>
      </div>);
    }
}
export default App;
/**
 * Rich Text Editor - Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
    private rteObj: RichTextEditorComponent;
    private rteValue: 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>`;
    private enterList: DropDownListComponent;
    private popupHeight: string = '200px';
    private enterValue: string = "P";
    private enterPlaceholder: string = "When pressing the enter key";
    private fields: FieldSettingsModel = { text: "text", value: "value" };
    private enterData: { [key: string]: Object }[] = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];

    private enterChange = (): void => {
        if (this.enterList.value === 'P') {
            this.rteObj.enterKey = 'P';
            this.rteObj.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.enterList.value === 'DIV') {
            this.rteObj.enterKey = 'DIV';
            this.rteObj.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.enterList.value === 'BR') {
            this.rteObj.enterKey = 'BR';
            this.rteObj.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 render() {
    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={this.enterData} ref={(dropdownlist) => { this.enterList = dropdownlist }} fields={this.fields} change={this.enterChange.bind(this)} value={this.enterValue} popupHeight={this.popupHeight} placeholder={this.enterPlaceholder} floatLabelType="Always" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor }} height={250} value={ this.rteValue }>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

/**
 * Rich Text Editor - Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteObj;
    let rteValue = `<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>`;
    let enterList;
    let popupHeight = '200px';
    let enterValue = "P";
    let enterPlaceholder = "When pressing the enter key";
    let fields = { text: "text", value: "value" };
    let enterData = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];
    function enterChange() {
        if (enterList.value === 'P') {
            rteObj.enterKey = 'P';
            rteObj.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 (enterList.value === 'DIV') {
            rteObj.enterKey = 'DIV';
            rteObj.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 (enterList.value === 'BR') {
            rteObj.enterKey = 'BR';
            rteObj.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>`;
        }
    }
    return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={enterData} ref={(dropdownlist) => { enterList = dropdownlist; }} fields={fields} change={enterChange.bind(this)} value={enterValue} popupHeight={popupHeight} placeholder={enterPlaceholder} floatLabelType="Always"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor; }} height={250} value={rteValue}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>
      </div>);
}
export default App;
/**
 * Rich Text Editor - Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteObj: RichTextEditorComponent;
    let rteValue: 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>`;
    let enterList: DropDownListComponent;
    let popupHeight: string = '200px';
    let enterValue: string = "P";
    let enterPlaceholder: string = "When pressing the enter key";
    let fields: FieldSettingsModel = { text: "text", value: "value" };
    let enterData: { [key: string]: Object }[] = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];

    function enterChange (): void {
        if (enterList.value === 'P') {
            rteObj.enterKey = 'P';
            rteObj.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 (enterList.value === 'DIV') {
            rteObj.enterKey = 'DIV';
            rteObj.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 (enterList.value === 'BR') {
            rteObj.enterKey = 'BR';
            rteObj.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>`;
        }
    }

    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={enterData} ref={(dropdownlist) => { enterList = dropdownlist }} fields={fields} change={enterChange.bind(this)} value={enterValue} popupHeight={popupHeight} placeholder={enterPlaceholder} floatLabelType="Always" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor }} height={250} value={ rteValue }>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>
      </div>
    );
}

export default App;

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.

[Class-component]

/**
 * Rich Text Editor - Shift Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    rteObj;
    rteValue = `<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>`;
    enterList;
    shiftEnterList;
    popupHeight = '200px';
    shiftEnterValue = "BR";
    shiftEnterPlaceholder = "When pressing the shift + enter key";
    fields = { text: "text", value: "value" };
    shiftEnterData = [
        { text: 'Create a new <br>', value: 'BR' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <p>', value: 'P' }
    ];
    shiftEnterChange = () => {
        if (this.shiftEnterList.value === 'BR') {
            this.rteObj.shiftEnterKey = 'BR';
        }
        else if (this.shiftEnterList.value === 'DIV') {
            this.rteObj.shiftEnterKey = 'DIV';
        }
        else if (this.shiftEnterList.value === 'P') {
            this.rteObj.shiftEnterKey = 'P';
        }
    };
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="shiftEnterOption" dataSource={this.shiftEnterData} ref={(dropdownlist) => { this.shiftEnterList = dropdownlist; }} fields={this.fields} change={this.shiftEnterChange.bind(this)} value={this.shiftEnterValue} popupHeight={this.popupHeight} placeholder={this.shiftEnterPlaceholder} floatLabelType="Always"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height={250} value={this.rteValue}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>
      </div>);
    }
}
export default App;
/**
 * Rich Text Editor - Shift Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteObj: RichTextEditorComponent;
  private rteValue: 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>`;
  private enterList: DropDownListComponent;
  private shiftEnterList: DropDownListComponent;
  private popupHeight: string = '200px';
  private shiftEnterValue: string = "BR";
  private shiftEnterPlaceholder: string = "When pressing the shift + enter key";
  private fields: FieldSettingsModel = { text: "text", value: "value" };
  private 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' }
  ];

  private shiftEnterChange = (): void => {
      if (this.shiftEnterList.value === 'BR') {
          this.rteObj.shiftEnterKey = 'BR';
      } else if (this.shiftEnterList.value === 'DIV') {
          this.rteObj.shiftEnterKey = 'DIV';
      } else if (this.shiftEnterList.value === 'P') {
          this.rteObj.shiftEnterKey = 'P';
      }
  }

  public render() {
    return (
       <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="shiftEnterOption" dataSource={this.shiftEnterData} ref={(dropdownlist) => { this.shiftEnterList = dropdownlist }} fields={this.fields} change={this.shiftEnterChange.bind(this)} value={this.shiftEnterValue} popupHeight={this.popupHeight} placeholder={this.shiftEnterPlaceholder} floatLabelType="Always" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor }} height={250} value={ this.rteValue }>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

/**
 * Rich Text Editor - Shift Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteObj;
    let rteValue = `<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>`;
    let enterList;
    let shiftEnterList;
    let popupHeight = '200px';
    let shiftEnterValue = "BR";
    let shiftEnterPlaceholder = "When pressing the shift + enter key";
    let fields = { text: "text", value: "value" };
    let shiftEnterData = [
        { text: 'Create a new <br>', value: 'BR' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <p>', value: 'P' }
    ];
    function shiftEnterChange() {
        if (shiftEnterList.value === 'BR') {
            rteObj.shiftEnterKey = 'BR';
        }
        else if (shiftEnterList.value === 'DIV') {
            rteObj.shiftEnterKey = 'DIV';
        }
        else if (shiftEnterList.value === 'P') {
            rteObj.shiftEnterKey = 'P';
        }
    }
    return (<div className='control-pane'>
      <div className='control-section' id="rte">
        <div className='rte-control-section'>
         <table className='api'>
              <tbody>
                  <tr>
                      <td>
                          <div>
                              <DropDownListComponent id="shiftEnterOption" dataSource={shiftEnterData} ref={(dropdownlist) => { shiftEnterList = dropdownlist; }} fields={fields} change={shiftEnterChange.bind(this)} value={shiftEnterValue} popupHeight={popupHeight} placeholder={shiftEnterPlaceholder} floatLabelType="Always"/>
                          </div>
                      </td>
                  </tr>
              </tbody>
          </table>
          <br />
          <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor; }} height={250} value={rteValue}>
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
          </RichTextEditorComponent>
        </div>
      </div>
    </div>);
}
export default App;
/**
 * Rich Text Editor - Shift Enter Key Customization Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
  let rteObj: RichTextEditorComponent;
  let rteValue: 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>`;
  let enterList: DropDownListComponent;
  let shiftEnterList: DropDownListComponent;
  let popupHeight: string = '200px';
  let shiftEnterValue: string = "BR";
  let shiftEnterPlaceholder: string = "When pressing the shift + enter key";
  let fields: FieldSettingsModel = { text: "text", value: "value" };
  let 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' }
  ];

  function shiftEnterChange(): void {
      if (shiftEnterList.value === 'BR') {
          rteObj.shiftEnterKey = 'BR';
      } else if (shiftEnterList.value === 'DIV') {
          rteObj.shiftEnterKey = 'DIV';
      } else if (shiftEnterList.value === 'P') {
          rteObj.shiftEnterKey = 'P';
      }
  }

  return (
     <div className='control-pane'>
      <div className='control-section' id="rte">
        <div className='rte-control-section'>
         <table className='api'>
              <tbody>
                  <tr>
                      <td>
                          <div>
                              <DropDownListComponent id="shiftEnterOption" dataSource={shiftEnterData} ref={(dropdownlist) => { shiftEnterList = dropdownlist }} fields={fields} change={shiftEnterChange.bind(this)} value={shiftEnterValue} popupHeight={popupHeight} placeholder={shiftEnterPlaceholder} floatLabelType="Always" />
                          </div>
                      </td>
                  </tr>
              </tbody>
          </table>
          <br/>
          <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor }} height={250} value={ rteValue }>
            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
          </RichTextEditorComponent>
        </div>
      </div>
    </div>
  );
}

export default App;

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.

[Class-component]

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component {
    rteObj;
    rteValue = `<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>`;
    enterList;
    popupHeight = '200px';
    enterValue = "P";
    enterPlaceholder = "When pressing the enter key";
    fields = { text: "text", value: "value" };
    enterData = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];
    enterChange = () => {
        if (this.enterList.value === 'P') {
            this.rteObj.enterKey = 'P';
            this.rteObj.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.enterList.value === 'DIV') {
            this.rteObj.enterKey = 'DIV';
            this.rteObj.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.enterList.value === 'BR') {
            this.rteObj.enterKey = 'BR';
            this.rteObj.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>`;
        }
    };

    onActionBegin =(args)=>{
        if (args.requestType === 'EnterAction') {
            args.cancel = true;                  // to prevent default enter key action in editor level
            args.originalEvent.preventDefault(); // to prevent default enter key action in browser level
        }
    }
    render() {
        return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={this.enterData} ref={(dropdownlist) => { this.enterList = dropdownlist; }} fields={this.fields} change={this.enterChange.bind(this)} value={this.enterValue} popupHeight={this.popupHeight} placeholder={this.enterPlaceholder} floatLabelType="Always"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height={250} value={this.rteValue} actionBegin={this.onActionBegin.bind(this)}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>
      </div>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ActionBeginEventArgs  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

class App extends React.Component<{},{}> {
    private rteObj: RichTextEditorComponent;
    private rteValue: 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>`;
    private enterList: DropDownListComponent;
    private popupHeight: string = '200px';
    private enterValue: string = "P";
    private enterPlaceholder: string = "When pressing the enter key";
    private fields: FieldSettingsModel = { text: "text", value: "value" };
    private enterData: { [key: string]: Object }[] = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];

    private enterChange = (): void => {
        if (this.enterList.value === 'P') {
            this.rteObj.enterKey = 'P';
            this.rteObj.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.enterList.value === 'DIV') {
            this.rteObj.enterKey = 'DIV';
            this.rteObj.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.enterList.value === 'BR') {
            this.rteObj.enterKey = 'BR';
            this.rteObj.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>`;
        }
    }

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

  public render() {
    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={this.enterData} ref={(dropdownlist) => { this.enterList = dropdownlist }} fields={this.fields} change={this.enterChange.bind(this)} value={this.enterValue} popupHeight={this.popupHeight} placeholder={this.enterPlaceholder} floatLabelType="Always" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor }} height={250} value={ this.rteValue } actionBegin={this.onActionBegin.bind(this)}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteObj;
    let rteValue = `<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>`;
    let enterList;
    let popupHeight = '200px';
    let enterValue = "P";
    let enterPlaceholder = "When pressing the enter key";
    let fields = { text: "text", value: "value" };
    let enterData = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];
    function enterChange() {
        if (enterList.value === 'P') {
            rteObj.enterKey = 'P';
            rteObj.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 (enterList.value === 'DIV') {
            rteObj.enterKey = 'DIV';
            rteObj.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 (enterList.value === 'BR') {
            rteObj.enterKey = 'BR';
            rteObj.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>`;
        }
    }
    function onActionBegin(args) {
        if (args.requestType === 'EnterAction') {
            args.cancel = true;                  // to prevent default enter key action in editor level
            args.originalEvent.preventDefault(); // to prevent default enter key action in browser level
        }
    }
    return (<div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={enterData} ref={(dropdownlist) => { enterList = dropdownlist; }} fields={fields} change={enterChange.bind(this)} value={enterValue} popupHeight={popupHeight} placeholder={enterPlaceholder} floatLabelType="Always"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor; }} height={250} value={rteValue} actionBegin={onActionBegin.bind(this)} >
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
            </RichTextEditorComponent>
          </div>
        </div>
      </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ActionBeginEventArgs  } from '@syncfusion/ej2-react-richtexteditor';
import { DropDownListComponent, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

function App() {
    let rteObj: RichTextEditorComponent;
    let rteValue: 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>`;
    let enterList: DropDownListComponent;
    let popupHeight: string = '200px';
    let enterValue: string = "P";
    let enterPlaceholder: string = "When pressing the enter key";
    let fields: FieldSettingsModel = { text: "text", value: "value" };
    let enterData: { [key: string]: Object }[] = [
        { text: 'Create a new <p>', value: 'P' },
        { text: 'Create a new <div>', value: 'DIV' },
        { text: 'Create a new <br>', value: 'BR' }
    ];

    function enterChange (): void {
        if (enterList.value === 'P') {
            rteObj.enterKey = 'P';
            rteObj.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 (enterList.value === 'DIV') {
            rteObj.enterKey = 'DIV';
            rteObj.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 (enterList.value === 'BR') {
            rteObj.enterKey = 'BR';
            rteObj.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>`;
        }
    }

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

    return (
      <div className='control-pane'>
        <div className='control-section' id="rte">
          <div className='rte-control-section'>
           <table className='api'>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <DropDownListComponent id="enterOption" dataSource={enterData} ref={(dropdownlist) => { enterList = dropdownlist }} fields={fields} change={enterChange.bind(this)} value={enterValue} popupHeight={popupHeight} placeholder={enterPlaceholder} floatLabelType="Always" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor }} height={250} value={ rteValue } actionBegin={onActionBegin.bind(this)}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
            </RichTextEditorComponent>
          </div>
        </div>
      </div>
    );
}

export default App;