This can be achieved by using setRange method in the RTE using NodeSelection instance. In this below sample, you have passed the text node (specific location in RTE content) in setStart method and passed the range in setRange method of RTE.
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, NodeSelection, ImageService, HtmlEditorService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template: `<ejs-richtexteditor id='defaultRTE' #sample (created)="onCreate($event)">
<ng-template #valueTemplate>
<p>The Rich Text Editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/"
target="_blank">markdown</a> of the content</p>
<p id="key"><b>Toolbar</b></p>
<ol>
<li>
<p> Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations, HTML view, etc </p>
</li>
<li>
<p> Toolbar is fully customizable </p>
</li>
</ol>
</ng-template>
</ejs-richtexteditor>
<div><input id="btn" class="e-btn" type="button" value="Set cursor point" /></div>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService ]
})
export class AppComponent {
@ViewChild('sample') public rteObj: RichTextEditorComponent;
onCreate() {
const element: Element = this.rteObj.contentModule.getDocument().getElementById("key");
document.getElementById('btn').onclick = function() {
const selectioncursor: NodeSelection = new NodeSelection();
const range: Range = document.createRange();
range.setStart(element.childNodes[0].firstChild, element.textContent.length); // to set the range
selectioncursor.setRange(document, range); // to set the cursor
};
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>