Bookmarks in ASP.NET MVC DOCX Editor Component

15 Aug 20264 minutes to read

A bookmark is a powerful tool that helps to mark a place in the document that can be found again easily. You can enter many bookmarks in the document and give each one a unique name to identify them easily.

ASP.NET MVC 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

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 the table of contents.

Add a bookmark

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

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

Select a bookmark

You can select the 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 it denotes whether to exclude the bookmark start and end from the selection. If true, excludes the bookmark start and end from the selection.

Delete a 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 bookmarks 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. If false, it ignores hidden bookmarks.

Get bookmarks from selection

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

container.documentEditor.selection.getBookmarks(false);

Replace bookmark content

You can replace bookmark 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, thus 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 the 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.

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBookmarkDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    var containerPanel;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Bookmark Dialog
            documenteditor.showDialog('Bookmark');
        });
    });
</script>
public ActionResult Default()
{
    return View();
}

Online Demo

Explore how to insert and manage bookmarks in Word documents using the ASP.NET MVC Document Editor in this live demo here.

See Also