Having trouble getting help?
Contact Support
Contact Support
Setting Cursor at Specific Range in Editor in React Rich Text Editor Component
27 Feb 20259 minutes to read
This can be achieved by using setRange
method in the Rich Text Editor using NodeSelection
instance. In this below sample, you have passed the text node (specific location in Rich Text Editor content) in setStart
method and passed the range in setRange
method of Rich Text Editor.
[Class-component]
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
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 <IFRAME> and <DIV> 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>";
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 value={this.rteValue} ref={(richtexteditor) => { this.rteObj = richtexteditor; }}>
<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';
class App extends React.Component<{},{}> {
private rteValue: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.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> 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>";
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 value={this.rteValue} ref={(richtexteditor) => { this.rteObj = richtexteditor! }}>
<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';
function App() {
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 <IFRAME> and <DIV> 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>";
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 value={rteValue} ref={(richtexteditor) => { rteObj = richtexteditor; }}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>
<button id='btn' className="e-control e-btn" 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';
function App(){
let rteValue: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.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> 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>";
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 value={rteValue} ref={(richtexteditor) => { rteObj = richtexteditor! }}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
<button id='btn' className="e-control e-btn" onClick={onclick.bind(this)}> Set cursor position</button>
</div>
);
}
export default App;