Basic Text Styling in React Rich Text Editor component

26 Mar 20258 minutes to read

The Rich Text Editor’s basic styles feature provides Essential® formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured.

Available Text Styles

The table below lists the available text styles in the Rich Text Editor’s toolbar.

Name Icons Summary Initialization  
Bold Bold icon Makes text thicker and darker toolbarSettings: { items: [‘Bold’]} <b>bold</b>
Italic Italic icon Slants text to the right toolbarSettings: { items: [‘Italic’]} <em>italic</em>
Underline Underline icon Adds a line beneath the text toolbarSettings: { items: [‘Underline’]}  
StrikeThrough StrikeThrough icon Applies a line through the text. toolbarSettings: { items: [‘StrikeThrough’]}  
InlineCode InlineCode icon Formats text as inline code toolbarSettings: { items: [‘InlineCode’]} <code>inline code</code>
SubScript SubScript icon Positions text slightly below the normal line toolbarSettings: { items: [‘SubScript’]}  
SuperScript SuperScript icon Positions text slightly above the normal line toolbarSettings: { items: [‘SuperScript’’]}  
LowerCase LowerCase icon Converts text to lowercase toolbarSettings: { items: [‘LowerCase’]}  
UpperCase UpperCase icon Converts text to uppercase toolbarSettings: { items: [‘UpperCase’’]}  

Please refer to the sample below to add these basic text styling options in the Rich Text Editor.

[Class-component]

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

class App extends React.Component {

    rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    toolbarSettings = {
      items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
    };
    
    render() {
        return (<RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
      <Inject services={[Toolbar, HtmlEditor]}/>
    </RichTextEditorComponent>);
    }
}
export default App;
import { HtmlEditor, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {

  private rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  private toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
  }
  public render() {
    return (
      <RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, HtmlEditor]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

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

function App() {
    let toolbarSettings = {
      items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
    }

    let rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    return (<RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, HtmlEditor]}/>
    </RichTextEditorComponent>);
}
export default App;
import { HtmlEditor, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  
  let toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
  }

  let rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  return (
    <RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, HtmlEditor]} />
    </RichTextEditorComponent>
  );
}

export default App;

See Also

Customizing Font Family, Size, and Color in Rich Text Editor