Bookmarks in JavaScript DOCX Editor

14 Aug 20266 minutes to read

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

JavaScript DOCX Editor (Document Editor) provides 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 built-in hyperlink dialog. You can also delete bookmarks from a document.

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

Add bookmark

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

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

Select Bookmark

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

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

NOTE

Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection.

Delete Bookmark

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

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

Get Bookmark from document

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

this.container.documentEditor.getBookmarks(false);

NOTE

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

Get Bookmark from selection

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

this.container.documentEditor.selection.getBookmarks(false);

Show or Hide bookmark

You can show or hide the bookmark indicators around bookmarked items in Document Editor component.

The following example code illustrates how to show or hide the bookmark indicators around bookmarked items.

this.container.documentEditor.documentEditorSettings.showBookmarks = true;

Replace bookmark content

Preserve the bookmark while replacing content

When you pass true for the excludeStartEnd parameter in selectBookmark, the bookmark start and end markers are preserved. The subsequent insertText call replaces only the content between the markers, so the bookmark remains intact and can be tracked later.

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

Remove the bookmark while replacing content

When you omit the excludeStartEnd parameter (or pass false), the bookmark start and end markers are included in the selection. The subsequent insertText call replaces both the content and the markers, so the bookmark is removed and cannot be tracked later.

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

Bookmark Dialog

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

var documenteditor = new ej.documenteditor.DocumentEditor({ enableBookmarkDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true, height: '370px' });

documenteditor.appendTo('#DocumentEditor');

document.getElementById('dialog').addEventListener('click', function () {
    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://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <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>



<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Online Demo

Explore how to insert and manage bookmarks in Word documents using the JavaScript (ES5) Document Editor in this live demo here.

See Also