Bookmarks in TypeScript DOCX Editor

14 Aug 20266 minutes to read

Bookmark is a powerful tool that helps you mark a place in the document so you can find it again easily. You can add multiple bookmarks in the document and give each one a unique name to identify easily.

TypeScript DOCX Editor (Document Editor) provides a built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using the built-in hyperlink dialog. You can also delete bookmarks from a document.

NOTE

  1. Bookmark names must begin with a letter. They can include both numbers and letters, but not spaces. Use an underscore to separate the words.
  2. Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for a table of contents.

Add bookmark

Using the insertBookmark method, a bookmark can be added to the selected text.

container.documentEditor.editor.insertBookmark("Bookmark1");

Select Bookmark

You can select a bookmark in the document using the selectBookmark method by providing the bookmark name to select as shown in the following code snippet.

container.documentEditor.selection.selectBookmark("Bookmark1", true);

NOTE

The second parameter is optional and denotes whether to exclude the bookmark start and end from the selection. When true, the bookmark start and end are excluded from the selection.

Delete Bookmark

You can delete a bookmark in the document using the deleteBookmark method as shown in the following code snippet.

container.documentEditor.editor.deleteBookmark("Bookmark1");

Get Bookmark from document

You can get all the bookmarks in the document using the getBookmarks method as shown in the following code snippet.

container.documentEditor.getBookmarks(false);

NOTE

The parameter denotes whether to include hidden bookmarks. When false, hidden bookmarks are ignored.

Get Bookmark from selection

You can get the bookmarks in the current selection in the document using the getBookmarks method as shown in the following code snippet.

container.documentEditor.selection.getBookmarks(false);

NOTE

The parameter denotes whether to include hidden bookmarks. When false, hidden bookmarks are ignored.

Replace bookmark content

You can replace a bookmark’s content without removing the bookmark start and end for backtracking the bookmark content.

container.documentEditor.selection.selectBookmark("Bookmark1", true);
container.documentEditor.editor.insertText('Hello World');

You can replace content by removing the bookmark start and end, so the bookmark content can’t be tracked in the future.

container.documentEditor.selection.selectBookmark("Bookmark1");
container.documentEditor.editor.insertText('Hello World');

Show or Hide bookmark

You can show or hide square brackets around bookmarked items in the Document Editor component.

The following example code illustrates how to show or hide square brackets around bookmarked items.

container.documentEditorSettings.showBookmarks = true;

Bookmark Dialog

The following example shows how to open the Bookmark dialog in the Document Editor.

import { DocumentEditor, Editor, Selection, SfdtExport, EditorHistory, BookmarkDialog } from '@syncfusion/ej2-documenteditor';

// Enable requir modules
DocumentEditor.Inject(Editor, Selection, SfdtExport, EditorHistory, BookmarkDialog);

// Initialize Document Editor component.
let documenteditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false,
    enableEditor: true,
    enableSelection: true,
    enableEditorHistory: true,
    enableBookmarkDialog: true,
    height: '590px'
});
documenteditor.appendTo('#DocumentEditor');

document.getElementById('dialog').addEventListener('click', () => {
    //Open bookmark dialog.
    documenteditor.showDialog('Bookmark');
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='toolbar'>
            <button id="dialog">Dialog</button>  
        </div>
        <div style="width:100%;height: 100%">
            <!--Element which will render as DocumentEditor -->
            <div id="DocumentEditor"></div>
        </div>
    </div>
</body>


</html>

Online Demo

Explore how to insert and manage bookmarks in Word documents using the JavaScript DOCX Editor in this live demo here.

See Also