Search results

Select and Get the Current Word and Paragraph in React DocumentEditor component

18 May 2022 / 2 minutes to read

You can get the current word or paragraph content from the React Document Editor component as plain text and SFDT (rich text).

Select and get the word in current cursor position

You can use selectCurrentWord API in selection module to select the current word at cursor position and use text API to get the selected content as plain text from React Document Editor component.

The following example code illustrates how to select and get the current word as plain text.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
export class Default extends React.Component {
  onCreated() {
    // To insert text in cursor position
    this.container.documentEditor.editor.insertText('Document editor');
    // Move selection to previous character
    this.container.documentEditor.selection.moveToPreviousCharacter();
    // To select the current word in document
    this.container.documentEditor.selection.selectCurrentWord();

    // To get the selected content as text
    let selectedContent:string = this.container.documentEditor.selection.text;
  }
  render() {
    return (
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          this.container = scope;
        }}
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
        created={this.onCreated.bind(this)}
      />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

To get the bookmark content as SFDT (rich text), please check this link

Select and get the paragraph in current cursor position

You can use selectParagraph API in selection module to select the current paragraph at cursor position and use text API or sfdt API to get the selected content as plain text or SFDT from React Document Editor component.

The following example code illustrates how to select and get the current paragraph as SFDT.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
export class Default extends React.Component {
  onCreated() {
    // To insert text in cursor position
    this.container.documentEditor.editor.insertText('Document editor');
    // To select the current paragraph in document
    this.container.documentEditor.selection.selectParagraph();

    // To get the selected content as SFDT
    let selectedContent: string = this.container.documentEditor.selection.sfdt;
  }
  render() {
    return (
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          this.container = scope;
        }}
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
        created={this.onCreated.bind(this)}
      />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));