Positioning Cursor at Content End in React Rich Text Editor

27 Feb 202512 minutes to read

To focus the cursor at the end of the content in the Rich Text Editor, you need to ensure the editor is focused and then manipulate the selection to place the cursor at the end. This involves focusing the editor using the focus method and then using the Range and Selection objects to collapse the range at the end of the content. Adding a slight delay (using setTimeout) ensures the focus is properly set before manipulating the cursor position.

The following example illustrates how to programmatically focus the cursor at the end of the Rich Text Editor content.

[Class-component]

app.jsx

import React, { Component, createRef } from 'react';
import { HtmlEditor, Audio, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = createRef();
    this.state = {
      value: `
            <p>Rich Text Editor allows inserting images from online sources as well as from a local computer into your content.</p>
            <p>Get started with the Quick Toolbar by clicking on the image.</p>
            <p>Custom styles can be added to the selected image inside the Rich Text Editor through the quick toolbar.</p>
        `,
    };
  }

  componentDidMount() {
    this.focusCursorAtEnd();
  }

  focusCursorAtEnd = () => {
    const editorObj = this.editorRef.current;
    if (editorObj) {
      setTimeout(() => {
        const editorElement = editorObj.contentModule.getEditPanel();
        editorElement.focus();
        const range = document.createRange();
        range.selectNodeContents(editorElement);
        range.collapse(false);
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
      }, 0);
    }
  };
    render() {
        return (  <RichTextEditorComponent ref={this.editorRef} value={this.state.value}>
        <Inject services={[Toolbar, Audio, Link, HtmlEditor, QuickToolbar]}/>
      </RichTextEditorComponent>);
    }
}
export default App;

app.tsx

import React, { Component, createRef } from 'react';
import { HtmlEditor, Audio, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';

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

    constructor(props: {}) {
        super(props);
        this.state = {
            value: `
                <p>Rich Text Editor allows inserting images from online sources as well as from a local computer into your content.</p>
                <p>Get started with the Quick Toolbar by clicking on the image.</p>
                <p>Custom styles can be added to the selected image inside the Rich Text Editor through the quick toolbar.</p>
            `
        };
    }

    componentDidMount() {
        this.focusCursorAtEnd();
    }

    private focusCursorAtEnd = (): void => {
        const editorObj = this.editorRef.current;
        if (editorObj) {
            setTimeout(() => {
                const editorElement = editorObj.contentModule.getEditPanel() as HTMLElement;
                editorElement.focus();
                const range = document.createRange();
                range.selectNodeContents(editorElement);
                range.collapse(false);
                const selection = window.getSelection();
                if (selection) {
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
            }, 0);
        }
    };


  public render() {
    return (
      <RichTextEditorComponent ref={this.editorRef} value={this.state.value}>
        <Inject services={[Toolbar, Audio, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

app.jsx

import * as React from 'react';
import { HtmlEditor, Audio, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import React, { useEffect, useRef, useState } from 'react';

function App() {
  let rteObj;
  const [value, setValue] = useState(`
        <p>Rich Text Editor allows inserting images from online sources as well as from a local computer into your content.</p>
        <p>Get started with the Quick Toolbar by clicking on the image.</p>
        <p>Custom styles can be added to the selected image inside the Rich Text Editor through the quick toolbar.</p>
    `);

  useEffect(() => {
    focusCursorAtEnd();
  }, []);

  const focusCursorAtEnd = () => {
    if (rteObj) {
      setTimeout(() => {
        const editorElement = rteObj.contentModule.getEditPanel();
        editorElement.focus();
        const range = document.createRange();
        range.selectNodeContents(editorElement);
        range.collapse(false);
        const selection = window.getSelection();
        if (selection) {
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }, 0);
    }
  };
    
    return ( 
    <RichTextEditorComponent height={450} ref={(richtexteditor) => {rteObj = richtexteditor;}} value={value}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>);
}
export default App;

app.tsx

import React, { useEffect, useRef, useState } from 'react';
import { HtmlEditor, Audio, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';

function App() {

    let rteObj: RichTextEditorComponent;
    const [value, setValue] = useState(`
          <p>Rich Text Editor allows inserting images from online sources as well as from a local computer into your content.</p>
          <p>Get started with the Quick Toolbar by clicking on the image.</p>
          <p>Custom styles can be added to the selected image inside the Rich Text Editor through the quick toolbar.</p>
      `);
  
    useEffect(() => {
      focusCursorAtEnd();
    }, []);
  
    const focusCursorAtEnd = () => {
      if (rteObj) {
        setTimeout(() => {
          const editorElement = rteObj.contentModule.getEditPanel() as HTMLElement;
          editorElement.focus();
          const range = document.createRange();
          range.selectNodeContents(editorElement);
          range.collapse(false);
          const selection = window.getSelection();
          if (selection) {
            selection.removeAllRanges();
            selection.addRange(range);
          }
        }, 0);
      }
    };

    return (
      <RichTextEditorComponent height={450} ref={(richtexteditor) => {rteObj = richtexteditor;}} value={value}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>);
}

export default App;