Set the cursor at the specific range in React Rich text editor component

20 Jan 202310 minutes to read

This can be achieved by using setRange method in the RTE using NodeSelection instance. In this below sample, we have passed the text node (specific location in RTE content) in setStart method and passed the range in setRange method of RTE.

[Class-component]

import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    rteObj;
    onclick() {
        const element = this.rteObj.contentModule.getDocument().getElementById("key");
        const selectioncursor = new NodeSelection();
        const range = document.createRange();
        range.setStart(element, 1); // to set the range
        selectioncursor.setRange(document, range); // to set the cursor
    }
    render() {
        return (<div>
      <RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor; }}>
        <p>The Rich Text Editor component is 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>
        <p id="key"><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
        </ul>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
      </RichTextEditorComponent>
      <button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}> Set cursor position</button>
     </div>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';

class App extends React.Component<{},{}> {
  public rteObj: RichTextEditorComponent;
  public onclick() {
      const element: Element= (this.rteObj as any).contentModule.getDocument().getElementById("key");
      const selectioncursor: NodeSelection = new NodeSelection();
      const range: Range = document.createRange();
      range.setStart(element, 1); // to set the range
      selectioncursor.setRange(document, range); // to set the cursor
}

  public render() {
    return (
      <div>
      <RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor! }}>
        <p>The Rich Text Editor component is 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>
        <p id="key"><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
        </ul>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
      <button id='btn' className="e-control e-btn" onClick={this.onclick= this.onclick.bind(this)}> Set cursor position</button>
     </div>
    );
  }
}

export default App;

[Functional-component]

import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';
function App() {
    let rteObj;
    function onclick() {
        const element = rteObj.contentModule.getDocument().getElementById("key");
        const selectioncursor = new NodeSelection();
        const range = document.createRange();
        range.setStart(element, 1); // to set the range
        selectioncursor.setRange(document, range); // to set the cursor
    }
    return (<div>
    <RichTextEditorComponent ref={(richtexteditor) => { rteObj = richtexteditor; }}>
      <p>The Rich Text Editor component is 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>
      <p id="key"><b>Key features:</b></p>
      <ul>
        <li>
          <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
        </li>
      </ul>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
    </RichTextEditorComponent>
    <button id='btn' className="e-control e-btn" onClick={onclick = onclick.bind(this)}> Set cursor position</button>
    </div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';

function App(){
  let rteObj: RichTextEditorComponent;
  function onclick() {
      const element: Element= (rteObj as any).contentModule.getDocument().getElementById("key");
      const selectioncursor: NodeSelection = new NodeSelection();
      const range: Range = document.createRange();
      range.setStart(element, 1); // to set the range
      selectioncursor.setRange(document, range); // to set the cursor
  }

  return (
    <div>
    <RichTextEditorComponent ref={(richtexteditor) => { rteObj = richtexteditor! }}>
      <p>The Rich Text Editor component is 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>
      <p id="key"><b>Key features:</b></p>
      <ul>
        <li>
          <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
        </li>
      </ul>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>
    <button id='btn' className="e-control e-btn" onClick={onclick= onclick.bind(this)}> Set cursor position</button>
    </div>
  );
}

export default App;