Enter key in React Rich text editor component
20 Jan 202324 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.
Enter key customization
By default, the <p> tag will be created while pressing the enter key. The enter key can be customized by using the enterKey property, where the possible tags that can be used to customize are <p>, <div>, and <br>.
When the enter key is customized with any of the possible values, pressing the enter key in the editor will create a new tag that is configured. Also, when the enter key is configured the default value of the Rich Text Editor will also change respectively with the configured values.
[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 { createElement } from '@syncfusion/ej2-base';
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 { createElement } from '@syncfusion/ej2-base';
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, the <br> tag will be created while pressing the shift + enter key. The shift + enter key can be customized by using the shiftEnterKey property where the possible tags that can be used to customize are <br>, <p>, <div>.
When the shift + enter key is customized with any of the possible values, pressing the shift + enter key in the editor will create a new tag that is configured. Also, when the shift + enter key is configured the default value of the Rich Text Editor will change respectively with the configured values.
[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 { createElement } from '@syncfusion/ej2-base';
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 { createElement } from '@syncfusion/ej2-base';
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;