Search results

Retrieve the Bookmark and Whole document content in React DocumentEditor component

29 Sep 2022 / 4 minutes to read

You can get the bookmark or whole document content from the React Document Editor component as plain text and SFDT (rich text).

Get the bookmark content as plain text

You can selectBookmark API to navigate to the bookmark and use text API to get the bookmark content as plain text from React Document Editor component.

The following example code illustrates how to get the bookmark content 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');
    // To select all the content in document
    this.container.documentEditor.selection.selectAll();
    // Insert bookmark to selected content
    this.container.documentEditor.editor.insertBookmark('Bookmark1');

    // Provide your bookmark name to navigate to specific bookmark
    this.container.documentEditor.selection.selectBookmark('Bookmark1');

    // To get the selected content as text
    let selectedContent = 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

Get the whole document content as text

You can use text API to get the whole document content as plain text from React Document Editor component.

The following example code illustrates how to get the whole document content 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');
    // To select all the content in document
    this.container.documentEditor.selection.selectAll();

    // To get the 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'));

Get the whole document content as SFDT(rich text)

You can use serialize API to get the whole document content as SFDT string from React Document Editor component.

The following example code illustrates how to get the whole document content 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 get the content as SFDT
    let selectedContent: string = this.container.documentEditor.serialize();
  }
  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'));

Get the header content as text

You can use goToHeader API to navigate the selection to the header and then use text API to get the content as plain text.

The following example code illustrates how to get the header content 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 navigate the selection to header
this.container.documentEditor.selection.goToHeader();
// To insert text in cursor position
this.container.documentEditor.editor.insertText('Document editor');
// To select all the content in document
this.container.documentEditor.selection.selectAll();

// 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'));

Similarly, you can use goToFooter API to navigate the selection to the footer and then use text API to get the content as plain text.