How to Retrieve Bookmark Content as Text in TypeScript DOCX Editor

28 Aug 20264 minutes to read

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

Get the bookmark content as plain text

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

The following example code illustrates how to get the bookmark content as plain text.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });

container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To insert text at the cursor position
container.documentEditor.editor.insertText('Document editor');
// To select all the content in the document
container.documentEditor.selection.selectAll();
// Insert a bookmark to the selected content
container.documentEditor.editor.insertBookmark('Bookmark1');

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

// To get the selected content as text
let selectedContent: string = container.documentEditor.selection.text;

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

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

Get the whole document content as text

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

The following example code illustrates how to get the whole document content as plain text.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });

container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To insert text at the cursor position
container.documentEditor.editor.insertText('Document editor');
// To select all the content in the document
container.documentEditor.selection.selectAll();

// To get the content as text
let selectedContent: string = container.documentEditor.selection.text;

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Get the whole document content as SFDT (rich text)

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

The following example code illustrates how to get the whole document content as SFDT.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });

container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To insert text at the cursor position
container.documentEditor.editor.insertText('Document editor');

// To get the content as SFDT
let selectedContent: string = container.documentEditor.serialize();

Get the header content as text

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

The following example code illustrates how to get the header content as plain text.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });

container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To navigate the selection to the header
container.documentEditor.selection.goToHeader();
// To insert text at the cursor position
container.documentEditor.editor.insertText('Document editor');
// To select all the content in the document
container.documentEditor.selection.selectAll();

// To get the selected content as text
let selectedContent: string = container.documentEditor.selection.text;

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

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