| layout | post |
|---|---|
| title | Bookmark in Vue DOCX Editor component | Syncfusion |
| description | Learn here all about Bookmark in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more. |
| control | Bookmark |
| platform | document-processing |
| documentation | ug |
| domainurl |
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.
Vue 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.
Using insertBookmark method, Bookmark can be added to the selected text.
this.$refs.container.ej2Instances.documentEditor.editor.insertBookmark("Bookmark1");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.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1", true);Note: The second parameter is an optional parameter 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.
You can delete bookmark in the document using deleteBookmark method as shown in the following code snippet.
this.$refs.container.ej2Instances.documentEditor.editor.deleteBookmark("Bookmark1");You can get all the bookmarks in the document using getBookmarks method as shown in the following code snippet.
this.$refs.container.ej2Instances.documentEditor.getBookmarks(false);Note: The parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored.
You can get bookmarks in current selection in the document using getBookmarks method as shown in the following code snippet.
this.$refs.container.ej2Instances.documentEditor.selection.getBookmarks(false);You can replace bookmark content without removing the bookmark start and end for backtracking the bookmark content.
this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1", true);
this.$refs.container.ej2Instances.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 future.
this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1");
this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello World');You can show or hide the square brackets around bookmarked items in DOCX Editor component.
The following example code illustrates how to show or hide square brackets around bookmarked items.
this.$refs.container.ej2Instances.documentEditorSettings.showBookmarks = true;The following example shows how to open bookmark dialog in DOCX Editor.
{% tabs %}
{% highlight html tabtitle="Composition API (/src/App.vue)" %}
{% include code-snippet/document-editor/vue/bookmark-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (/src/App.vue)" %}
{% include code-snippet/document-editor/vue/bookmark-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}
{% previewsample "/document-processing/code-snippet/document-editor/vue/bookmark-cs1" %}
Explore how to insert and manage bookmarks in Word documents using the Vue DOCX Editor in this live demo here.