Style Appearance Customization in the React Rich Text Editor component

16 May 202515 minutes to read

The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences.

Customizing placeholder text

Use the following CSS to customize the default color in the Rich Text Editor’s placeholder.

.e-richtexteditor .e-rte-placeholder {
    color: blue;
    font-family: monospace;
}

Customizing editor content

Use the following CSS to modify the default style of the Rich Text Editor’s content area, including font properties, background, and text color.

/* To change font family and font size */
.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    font-size: 20px;
    font-family: Segoe ui;
}

/* To change font color and content background */
.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-source-content {
    background: seashell;
    color: blue;
}

Customizing editor toolbar

Use the following CSS to customize the default color in the Rich Text Editor’s toolbar icon.

/* To change font color for toolbar icon */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons:active {
    color: red;
}

/* To change font color for toolbar button */
.e-toolbar .e-tbar-btn,
.e-toolbar .e-tbar-btn:active,
.e-toolbar .e-tbar-btn:hover {
    color: red;
}

/* To change font color for toolbar button in active state*/
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-rte-dropdown-btn-text {
    color: red;
}

/* To change font color for expanded toolbar items */
.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons,
.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
    color: red;
}

Customizing character count display

Use the following CSS to customize the default color in the Rich Text Editor’s character count.

/* To change font color, font family, font size and opacity  */
.e-richtexteditor .e-rte-character-count {
    color: red;
    font-family: segoe ui;
    font-size: 18px;
    opacity: 00.54;
    padding-bottom: 2px;
    padding-right: 14px;
}

Customizing border color

Use the following CSS to customize the border color in the Rich Text Editor’s container.

.e-richtexteditor .e-rte-container{
    border: 2px solid #454bc1;
    border-radius: 4px;
}

Highlight the specific lines

Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor’s executeCommand method.

[Class-component]

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.rteRef = createRef();
        this.nodeSelection = new NodeSelection();
    }
    
    rteValue = "<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>";

    setBackground = () => {
        if (this.rteRef.current) {
            const rteContent = this.rteRef.current.contentModule.getDocument();
            const firstParagraph = this.rteRef.current.contentModule
            .getEditPanel()
            .querySelector('p');

            if (firstParagraph && firstParagraph.firstChild) {
            // Select text from index 4 to 20
            this.nodeSelection.setSelectionText(
                rteContent,
                firstParagraph.firstChild,
                firstParagraph.firstChild,
                4, // Start index
                20 // End index
            );

            // Apply background color
            this.rteRef.current.executeCommand('backColor', 'yellow');
            }
        }
    };
    
    render() {
        return (
            <div>
                <button onClick={this.setBackground} className="e-btn" style=> Apply </button>
                <RichTextEditorComponent ref={this.rteRef} height={350} value={this.rteValue}>
                    <Inject services={[Toolbar, HtmlEditor]} />
                </RichTextEditorComponent>
            </div>
        );
    }
}
export default App;
import { HtmlEditor, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { createRef } from 'react';
import { NodeSelection } from '@syncfusion/ej2-react-richtexteditor';

class App extends React.Component<{},{}> {
  private rteRef = createRef<RichTextEditorComponent>();
  private nodeSelection: NodeSelection = new NodeSelection();

  private rteValue: string =
    "<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>";

  setBackground = () => {
      if (this.rteRef.current) {
          const rteContent = this.rteRef.current.contentModule.getDocument();
          const firstParagraph = this.rteRef.current.contentModule
          .getEditPanel()
          .querySelector('p');

          if (firstParagraph && firstParagraph.firstChild) {
          // Select text from index 4 to 20
          this.nodeSelection.setSelectionText(
              rteContent,
              firstParagraph.firstChild,
              firstParagraph.firstChild,
              4, // Start index
              20 // End index
          );

          // Apply background color
          this.rteRef.current.executeCommand('backColor', 'yellow');
          }
      }
  };
  public render() {
    return (
      <div>
        <button onClick={this.setBackground} className="e-btn" style=> Apply </button>
        <RichTextEditorComponent ref={this.rteRef} height={350} value={this.rteValue}>
          <Inject services={[Toolbar, HtmlEditor]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

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

function App() {
    let rteValue = "<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>";
    
    const rteRef = useRef(null);

    const nodeSelection = new NodeSelection();

    const setBackground = () => {
      if (rteRef.current) {
        const rteContent = rteRef.current.contentModule.getDocument();
        const firstParagraph = rteRef.current.contentModule
          .getEditPanel()
          .querySelector('p');

        if (firstParagraph && firstParagraph.firstChild) {
          // Select text from index 4 to 20
          nodeSelection.setSelectionText(
            rteContent,
            firstParagraph.firstChild,
            firstParagraph.firstChild,
            4, // Start index
            20 // End index
          );

          // Apply background color
          rteRef.current.executeCommand('backColor', 'yellow');
        }
      }
    };
    return (
      <div> <button onClick={setBackground} className="e-btn" style=> Apply </button>
      <RichTextEditorComponent ref={rteRef} height={350} value={rteValue}>
        <Inject services={[Toolbar, HtmlEditor]} />
      </RichTextEditorComponent>
    </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { useRef } from 'react';
import { NodeSelection } from '@syncfusion/ej2-react-richtexteditor';

function App() {
    let rteValue: string = "<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>";
    
    const rteRef = useRef(null);

    const nodeSelection = new NodeSelection();

    const setBackground = () => {
      if (rteRef.current) {
        const rteContent = rteRef.current.contentModule.getDocument();
        const firstParagraph = rteRef.current.contentModule
          .getEditPanel()
          .querySelector('p');

        if (firstParagraph && firstParagraph.firstChild) {
          // Select text from index 4 to 20
          nodeSelection.setSelectionText(
            rteContent,
            firstParagraph.firstChild,
            firstParagraph.firstChild,
            4, // Start index
            20 // End index
          );

          // Apply background color
          rteRef.current.executeCommand('backColor', 'yellow');
        }
      }
    };
  
  return (
    <div> <button onClick={setBackground} className="e-btn" style=> Apply </button>
      <RichTextEditorComponent ref={rteRef} height={350} value={rteValue}>
        <Inject services={[Toolbar, HtmlEditor]} />
      </RichTextEditorComponent>
    </div>
  );
}
export default App;

See also