How to Get Selected Content in TypeScript DOCX Editor

28 Aug 20264 minutes to read

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

Get the selected content as plain text

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

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

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

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

//Creating custom menu items
let menuItems: MenuItemModel[] = [
    {
        text: 'Search In Google',
        id: 'search_in_google',
        iconCss: 'e-icons e-de-ctnr-find'
    }];
//Adding custom options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
//To handle contextmenu select event
container.documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
    let item: string = args.id;
    let id: string = container.documentEditor.element.id;
    switch (item) {
        case id + 'search_in_google':
            // To get the selected content as plain text
            let searchContent: string = container.documentEditor.selection.text;
            if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                window.open('https://google.com/search?q=' + searchContent);
            }
            break;
    }
};

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.

You can add the following custom options using this API:

Save or export the selected text as a text file.
Search the selected text in Google or other search engines.
Show synonyms for the selected word in the context menu and replace with the selected synonym using the setter method of the same API.

Get the selected content as SFDT (rich text)

You can use the sfdt API to get the selected content as rich text from the TypeScript DOCX Editor component.

The following example code illustrates how to get the content of a bookmark and export it 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 select all the content in the document
container.documentEditor.selection.selectAll();
// Insert bookmark to selected content
container.documentEditor.editor.insertBookmark('Bookmark1');
//Select the bookmark
container.documentEditor.selection.selectBookmark('Bookmark1');
// To get the selected content as SFDT
let selectedContent: string = container.documentEditor.selection.sfdt;
// Insert the SFDT content at the cursor position using paste API
container.documentEditor.editor.paste(selectedContent);