HelpBot Assistant

How can I help you?

Selection in React Rich Text Editor Component

21 Nov 202524 minutes to read

Text selection

The Rich Text Editor supports character range-based text selection using the Syncfusion Slider component. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted.

Adding a Slider for character range selection

The Rich Text Editor can be integrated with the Slider component to enable precise character range-based text selection. The slider is configured in range type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically.

This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis.

function App() {
    const [sliderValue, setSliderValue] = useState<[number, number]>([0, 50]);
    const [maxLength, setMaxLength] = useState(400);
    return (
        <SliderComponent type="Range" value={sliderValue} min={0} max={maxLength} />
    );
}

export default App;

Dynamic range adjustment based on content

When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values.

function App() {
    const rteContent = `<p>The Syncfusion 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. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`;

    useEffect(() => {
        setTimeout(() => {
        const rte = rteRef.current;
        if (!rte) return;

        const panel = rte.contentModule.getEditPanel();
        const realLength = panel.textContent?.length ?? 0;

        setMaxLength(realLength);
        if (sliderRef.current) {
            sliderRef.current.max = realLength;
            sliderRef.current.dataBind();
        }

        panel.focus();
        onSliderChange({ value: sliderValue } as ChangeEventArgs);
        }, 100);
    }, []);
    return (
        <RichTextEditorComponent value={rteContent}>
            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
        </RichTextEditorComponent>
    );
}

export default App;

Precise selection using DOM range

The selection logic is implemented in the change event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, getTextNodeAtOffset(), which employs a TreeWalker to traverse text nodes and locate the exact node and offset for the given character positions.

A Range object is created using these offsets and applied to the current selection using the browser’s Selection API. This guarantees accurate highlighting even when the content spans multiple text nodes.

function App() {
    const [sliderValue, setSliderValue] = useState<[number, number]>([0, 50]);
    const [maxLength, setMaxLength] = useState(400);
      
    const onSliderChange = (args: ChangeEventArgs) => {
        const [start, end] = args.value as [number, number];
        const rte = rteRef.current;
        if (!rte) return;

        const panel = rte.contentModule.getEditPanel();
        const max = panel.textContent?.length ?? 0;
        const safeStart = Math.min(start, max);
        const safeEnd = Math.min(end, max);

        const startInfo = getTextNodeAtOffset(panel, safeStart);
        const endInfo = getTextNodeAtOffset(panel, safeEnd);

        if (startInfo && endInfo) {
            const range = document.createRange();
            range.setStart(startInfo.node, startInfo.offset);
            range.setEnd(endInfo.node, endInfo.offset);
            const selection = window.getSelection();
            if (selection) {
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    setSliderValue([safeStart, safeEnd]);
    };

    return (
        <SliderComponent ref={sliderRef} type="Range" value={sliderValue} min={0} max=
        {maxLength} change={onSliderChange} />
    );
}

export default App;

Helper function for accurate offset calculation

The getTextNodeAtOffset() function uses a TreeWalker to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly.

function App() {
    const getTextNodeAtOffset = (root: Node, offset: number) => {
    let current = 0;
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    let node: Text;
    while ((node = walker.nextNode() as Text)) {
      const len = node.textContent?.length ?? 0;
      if (current + len >= offset) {
        return { node, offset: offset - current };
      }
      current += len;
    }
    return null;
  };
   return()
}

export default App;

[Class-component]

app.jsx
app.tsx
import * as React from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,
  Inject,
} from '@syncfusion/ej2-react-richtexteditor';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.rteRef = React.createRef();
    this.sliderRef = React.createRef();

    this.state = {
      sliderValue: [0, 50],
      maxLength: 400,
    };

    this.rteContent = `<p>The Syncfusion 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. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`;
  }

  componentDidMount() {
    setTimeout(() => {
      const panel = this.rteRef.current.contentModule.getEditPanel();
      const realLength = panel.textContent?.length || 0;

      this.setState({ maxLength: realLength });

      if (this.sliderRef.current) {
        this.sliderRef.current.max = realLength;
        this.sliderRef.current.dataBind();
      }

      panel.focus();
      this.onSliderChange({ value: this.state.sliderValue });
    }, 100);
  }

  getTextNodeAtOffset(root, offset) {
    let currentOffset = 0;
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);

    while (walker.nextNode()) {
      const node = walker.currentNode;
      const nodeLength = node.textContent.length;

      if (currentOffset + nodeLength >= offset) {
        return {
          node,
          offset: offset - currentOffset,
        };
      }

      currentOffset += nodeLength;
    }

    return null;
  }

  onSliderChange = (args) => {
    const [start, end] = args.value;
    const panel = this.rteRef.current.contentModule.getEditPanel();
    const maxLength = panel.textContent?.length || 0;

    const safeStart = Math.min(start, maxLength);
    const safeEnd = Math.min(end, maxLength);

    const startInfo = this.getTextNodeAtOffset(panel, safeStart);
    const endInfo = this.getTextNodeAtOffset(panel, safeEnd);

    if (startInfo && endInfo) {
      const range = document.createRange();
      range.setStart(startInfo.node, startInfo.offset);
      range.setEnd(endInfo.node, endInfo.offset);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }

    this.setState({ sliderValue: [safeStart, safeEnd] });
  };

  render() {
    const { sliderValue, maxLength } = this.state;

    return (
      <div id="container">
        <div className="sliderwrap">
          <label className="labeltext">Range Slider</label>
          <SliderComponent
            ref={this.sliderRef}
            type="Range"
            value={sliderValue}
            min={0}
            max={maxLength}
            change={this.onSliderChange}
          />
        </div>

        <RichTextEditorComponent ref={this.rteRef} value={this.rteContent}>
          <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;
import * as React from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  Resize,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';
import { SliderComponent, ChangeEventArgs } from '@syncfusion/ej2-react-inputs';

interface AppState {
  sliderValue: number[];
  maxLength: number;
}

class App extends React.Component<{}, AppState> {
  private rteRef = React.createRef<RichTextEditorComponent>();
  private sliderRef = React.createRef<SliderComponent>();

  private rteContent: string = `<p>The Syncfusion 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. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`;

  constructor(props: {}) {
    super(props);
    this.state = {
      sliderValue: [0, 50],
      maxLength: 400
    };
  }

  componentDidMount(): void {
    setTimeout(() => {
      const panel = this.rteRef.current?.contentModule.getEditPanel();
      const realLength = panel?.textContent?.length ?? 0;

      this.setState({ maxLength: realLength });

      if (this.sliderRef.current) {
        this.sliderRef.current.max = realLength;
        this.sliderRef.current.dataBind();
      }

      panel?.focus();
      this.onSliderChange({ value: this.state.sliderValue } as ChangeEventArgs);
    }, 100);
  }

  getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null {
    let currentOffset = 0;
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);

    while (walker.nextNode()) {
      const node = walker.currentNode as Text;
      const nodeLength = node.textContent?.length ?? 0;

      if (currentOffset + nodeLength >= offset) {
        return {
          node,
          offset: offset - currentOffset
        };
      }

      currentOffset += nodeLength;
    }

    return null;
  }

  onSliderChange = (args: ChangeEventArgs): void => {
    const [start, end] = args.value as number[];
    const panel = this.rteRef.current?.contentModule.getEditPanel();
    const maxLength = panel?.textContent?.length ?? 0;

    const safeStart = Math.min(start, maxLength);
    const safeEnd = Math.min(end, maxLength);

    const startInfo = this.getTextNodeAtOffset(panel!, safeStart);
    const endInfo = this.getTextNodeAtOffset(panel!, safeEnd);

    if (startInfo && endInfo) {
      const range = document.createRange();
      range.setStart(startInfo.node, startInfo.offset);
      range.setEnd(endInfo.node, endInfo.offset);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }

    this.setState({ sliderValue: [safeStart, safeEnd] });
  };

  render(): JSX.Element {
    const { sliderValue, maxLength } = this.state;

    return (
      <div id="container">
        <div className="sliderwrap">
          <label className="labeltext">Range Slider</label>
          <SliderComponent
            ref={this.sliderRef}
            type="Range"
            value={sliderValue}
            min={0}
            max={maxLength}
            change={this.onSliderChange}
          />
        </div>

        <RichTextEditorComponent ref={this.rteRef} value={this.rteContent}>
          <Inject services={[Toolbar, Image, Link, HtmlEditor, Resize, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { useRef, useEffect, useState } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  const rteRef = useRef(null);
  const sliderRef = useRef(null);
  const [sliderValue, setSliderValue] = useState([0, 50]);
  const [maxLength, setMaxLength] = useState(400);

  const rteContent = `<p>The Syncfusion 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. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`;

  useEffect(() => {
    setTimeout(() => {
      const rte = rteRef.current;
      if (!rte) return;

      const panel = rte.contentModule.getEditPanel();
      const realLength = panel.textContent ? panel.textContent.length : 0;

      setMaxLength(realLength);
      if (sliderRef.current) {
        sliderRef.current.max = realLength;
        sliderRef.current.dataBind();
      }

      panel.focus();
      onSliderChange({ value: sliderValue });
    }, 100);
  }, []);

  const getTextNodeAtOffset = (root, offset) => {
    let current = 0;
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    let node;
    while ((node = walker.nextNode())) {
      const len = node.textContent ? node.textContent.length : 0;
      if (current + len >= offset) {
        return { node, offset: offset - current };
      }
      current += len;
    }
    return null;
  };

  const onSliderChange = (args) => {
    const [start, end] = args.value;
    const rte = rteRef.current;
    if (!rte) return;

    const panel = rte.contentModule.getEditPanel();
    const max = panel.textContent ? panel.textContent.length : 0;
    const safeStart = Math.min(start, max);
    const safeEnd = Math.min(end, max);

    const startInfo = getTextNodeAtOffset(panel, safeStart);
    const endInfo = getTextNodeAtOffset(panel, safeEnd);

    if (startInfo && endInfo) {
      const range = document.createRange();
      range.setStart(startInfo.node, startInfo.offset);
      range.setEnd(endInfo.node, endInfo.offset);
      const sel = window.getSelection();
      if (sel) {
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }

    setSliderValue([safeStart, safeEnd]);
  };

  return (
    <div id="container">
      <div className="sliderwrap">
        <label className="labeltext">Range Slider</label>
        <SliderComponent
          ref={sliderRef}
          type="Range"
          value={sliderValue}
          min={0}
          max={maxLength}
          change={onSliderChange}
        />
      </div>

      <RichTextEditorComponent ref={rteRef} value={rteContent}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;
import { useRef, useEffect, useState } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,  
  Inject
} from '@syncfusion/ej2-react-richtexteditor';
import { SliderComponent, ChangeEventArgs } from '@syncfusion/ej2-react-inputs';

function App() {
  const rteRef = useRef<RichTextEditorComponent>(null);
  const sliderRef = useRef<SliderComponent>(null);
  const [sliderValue, setSliderValue] = useState<[number, number]>([0, 50]);
  const [maxLength, setMaxLength] = useState(400);

  const rteContent = `<p>The Syncfusion 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. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`;

  useEffect(() => {
    setTimeout(() => {
      const rte = rteRef.current;
      if (!rte) return;

      const panel = rte.contentModule.getEditPanel();
      const realLength = panel.textContent?.length ?? 0;

      setMaxLength(realLength);
      if (sliderRef.current) {
        sliderRef.current.max = realLength;
        sliderRef.current.dataBind();
      }

      panel.focus();
      onSliderChange({ value: sliderValue } as ChangeEventArgs);
    }, 100);
  }, []);

  const getTextNodeAtOffset = (root: Node, offset: number) => {
    let current = 0;
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    let node: Text;
    while ((node = walker.nextNode() as Text)) {
      const len = node.textContent?.length ?? 0;
      if (current + len >= offset) {
        return { node, offset: offset - current };
      }
      current += len;
    }
    return null;
  };

  const onSliderChange = (args: ChangeEventArgs) => {
    const [start, end] = args.value as [number, number];
    const rte = rteRef.current;
    if (!rte) return;

    const panel = rte.contentModule.getEditPanel();
    const max = panel.textContent?.length ?? 0;
    const safeStart = Math.min(start, max);
    const safeEnd = Math.min(end, max);

    const startInfo = getTextNodeAtOffset(panel, safeStart);
    const endInfo = getTextNodeAtOffset(panel, safeEnd);

    if (startInfo && endInfo) {
      const range = document.createRange();
      range.setStart(startInfo.node, startInfo.offset);
      range.setEnd(endInfo.node, endInfo.offset);
      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }

    setSliderValue([safeStart, safeEnd]);
  };

  return (
    <div id="container">
      <div className="sliderwrap">
        <label className="labeltext">Range Slider</label>
        <SliderComponent
          ref={sliderRef}
          type="Range"
          value={sliderValue}
          min={0}
          max={maxLength}
          change={onSliderChange}
        />
      </div>

      <RichTextEditorComponent ref={rteRef} value={rteContent}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;

Node selection

Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection.

The following example demonstrates how to select a paragraph node programmatically using the browser’s native Range and Selection APIs.

[Class-component]

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.rteRef = React.createRef();
    this.rteValue = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;
  }

  selectSecondParagraph = () => {
    const panel = this.rteRef.current?.contentModule.getEditPanel();
    const paragraphs = panel.querySelectorAll('p');

    if (paragraphs.length > 1) {
      const range = document.createRange();
      range.selectNode(paragraphs[1]); // Select the second paragraph

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  };

  render() {
    return (
      <div>
        <button
          className="e-btn"
          style=
          onClick={this.selectSecondParagraph}
        >
          Select Paragraph
        </button>
        <RichTextEditorComponent ref={this.rteRef} value={this.rteValue}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

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

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

  private rteRef = React.createRef<RichTextEditorComponent>();

  private rteValue: string = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;

  selectSecondParagraph = (): void => {
    const panel = this.rteRef.current?.contentModule.getEditPanel();
    if (!panel) return;

    const paragraphs = panel.querySelectorAll('p');
    if (paragraphs.length > 1) {
      const range = document.createRange();
      range.selectNode(paragraphs[1]); // Select the second <p> element

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  };

  render(): JSX.Element {
    return (
      <div>
        <button
          className="e-btn"
          style=
          onClick={this.selectSecondParagraph}
        >
          Select Node
        </button>

        <RichTextEditorComponent
          ref={this.rteRef}
          value={this.rteValue}
          height={450}
        >
          <Inject
            services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}
          />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import React, { useRef } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const rteRef = useRef(null);

  const rteValue = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;

  const selectSecondParagraph = () => {
    const panel = rteRef.current?.contentModule.getEditPanel();
    if (!panel) return;

    const paragraphs = panel.querySelectorAll('p');
    if (paragraphs.length > 1) {
      const range = document.createRange();
      range.selectNode(paragraphs[1]);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  };

  return (
    <div>
      <button
        className="e-btn"
        style=
        onClick={selectSecondParagraph}
      >
        Select Node
      </button>

      <RichTextEditorComponent
        ref={rteRef}
        value={rteValue}
        height={450}
      >
        <Inject
          services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}
        />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;
import React, { useRef } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  Resize,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const rteRef = useRef<RichTextEditorComponent>(null);

  const rteValue: string = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;

  const selectSecondParagraph = (): void => {
    const panel = rteRef.current?.contentModule.getEditPanel();
    if (!panel) return;

    const paragraphs = panel.querySelectorAll('p');
    if (paragraphs.length > 1) {
      const range = document.createRange();
      range.selectNode(paragraphs[1]);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  };

  return (
    <div>
      <button
        className="e-btn"
        style=
        onClick={selectSecondParagraph}
      >
        Select Node
      </button>

      <RichTextEditorComponent
        ref={rteRef}
        value={rteValue}
        height={450}
      >
        <Inject
          services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}
        />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;

Cell selection

Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction.

The following example demonstrates how to select a table cell programmatically using the browser’s native Range and Selection APIs.

[Class-component]

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.rteRef = React.createRef();
    this.rteValue = `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`;
  }

  selectCell = () => {
    const panel = this.rteRef.current.contentModule.getEditPanel();
    const cells = panel.querySelectorAll('td');

    if (cells.length > 2) {
      const cell = cells[2]; // Third cell
      const range = document.createRange();
      range.selectNode(cell);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }

      cell.style.backgroundColor = '#cce5ff';
      cell.classList.add('e-cell-select');
    }
  };

  render() {
    return (
      <div>
        <button
          className="e-btn"
          style=
          onClick={this.selectCell}
        >
          Select Cell
        </button>
        <RichTextEditorComponent ref={this.rteRef} value={this.rteValue}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

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

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

  private rteRef = React.createRef<RichTextEditorComponent>();

  private rteValue: string = `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`;

  selectCell = (): void => {
    const panel = this.rteRef.current.contentModule.getEditPanel();
    const cells = panel.querySelectorAll('td');

    if (cells.length > 2) {
      const cell = cells[2]; // Third cell
      const range = document.createRange();
      range.selectNode(cell);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }

      cell.style.backgroundColor = '#cce5ff';
      cell.classList.add('e-cell-select');
    }
  };

  render(): JSX.Element {
    return (
      <div>
        <button
          className="e-btn"
          style=
          onClick={this.selectCell}
        >
          Select Cell
        </button>
        <RichTextEditorComponent ref={this.rteRef} value={this.rteValue}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import React, { useRef } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const rteRef = useRef(null);

  const rteValue = `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`;

  const selectCell = () => {
    const panel = rteRef.current?.contentModule.getEditPanel();
    if (!panel) return;

    const cells = panel.querySelectorAll('td');
    if (cells.length > 2) {
      const cell = cells[2]; // Select the third cell
      const range = document.createRange();
      range.selectNode(cell);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }

      cell.style.backgroundColor = '#cce5ff';
      cell.classList.add('e-cell-select');
    }
  };

  return (
    <div>
      <button
        className="e-btn"
        style=
        onClick={selectCell}
      >
        Select Cell
      </button>

      <RichTextEditorComponent ref={rteRef} value={rteValue} height={450}>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;
import React, { useRef } from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  QuickToolbar,
  Inject
} from '@syncfusion/ej2-react-richtexteditor';

function App(){
  const rteRef = useRef<RichTextEditorComponent>(null);

  const rteValue: string = `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`;

  const selectCell = (): void => {
    const panel = rteRef.current?.contentModule.getEditPanel();
    if (!panel) return;

    const cells = panel.querySelectorAll('td');
    if (cells.length > 2) {
      const cell = cells[2]; // Select the third cell
      const range = document.createRange();
      range.selectNode(cell);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }

      cell.style.backgroundColor = '#cce5ff';
      cell.classList.add('e-cell-select');
    }
  };

  return (
    <div>
      <button
        className="e-btn"
        style=
        onClick={selectCell}
      >
        Select Cell
      </button>

      <RichTextEditorComponent ref={rteRef} value={rteValue} height={450}>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;

Select all content

To select all content within the Rich Text Editor, use the selectAll method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content.

[Class-component]

app.jsx
app.tsx
import * as React from 'react';
import {
  RichTextEditorComponent,
  HtmlEditor,
  Toolbar,
  Image,
  Link,
  Resize,
  QuickToolbar,
  Inject,
} from '@syncfusion/ej2-react-richtexteditor';

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

  selectAllContent = () => {
    if (this.rteRef.current) {
      this.rteRef.current.selectAll();
    }
  };

  render() {
    return (
      <div>
        <button className="e-btn" style= onClick={this.selectAllContent} >Select All</button>
        <RichTextEditorComponent ref={this.rteRef} value={this.rteValue} height={450}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
        </RichTextEditorComponent>
      </div>
    );
  }
}

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

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

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

  selectAllContent = (): void => {
    if (this.rteRef.current) {
      this.rteRef.current.selectAll();
    }
  };

  render() {
    return (
      <div>
        <button className="e-btn" style= onClick={this.selectAllContent}>
          Select All
        </button>

        <RichTextEditorComponent
          ref={this.rteRef}
          value={this.rteValue}
          height={450}
        >
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import {
  HtmlEditor,
  Inject,
  RichTextEditorComponent,
  Toolbar,
} from '@syncfusion/ej2-react-richtexteditor';
import React, { useRef } from 'react';

function App() {
  const rteRef = useRef(null);
  let rteValue =
    "<p>The Syncfusion 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>";

  const selectAllContent = () => {
    if (rteRef.current) {
      rteRef.current.selectAll();
    }
  };

  return (
    <div>
      <button className="e-btn" style= onClick={selectAllContent}>
        Select All
      </button>

      <RichTextEditorComponent height={450} ref={rteRef} value={rteValue}>
        <Inject services={[Toolbar, HtmlEditor]} />
      </RichTextEditorComponent>
    </div>
  );
}
export default App;
import {
  HtmlEditor,
  Inject,
  RichTextEditorComponent,
  Toolbar,
} from '@syncfusion/ej2-react-richtexteditor';
import React, { useRef } from 'react';

function App() {

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

  const selectAllContent = (): void => {
    if (rteRef.current) {
      rteRef.current.selectAll();
    }
  };

  return (
    <div>
      <button className="e-btn" style= onClick={selectAllContent}>
        Select All
      </button>

      <RichTextEditorComponent height={450} ref={rteRef} value={rteValue}>
        <Inject services={[Toolbar, HtmlEditor]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Selection in React Rich Text Editor Component

Text selection

Adding a Slider for character range selection

Dynamic range adjustment based on content

Precise selection using DOM range

Helper function for accurate offset calculation

Node selection

Cell selection

Select all content