Bookmark in Angular Document editor component
20 Dec 20223 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.
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");
Delete Bookmark
You can delete bookmark in the document using deleteBookmark
method as shown in the following code snippet.
this.container.documentEditor.editor.deleteBookmark("Bookmark1");
Get Bookmark
You can get all the bookmarks in the document using getBookmarks
method as shown in the following code snippet.
this.container.documentEditor.selection.getBookmarks(false);
Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark.
Bookmark Dialog
The following example shows how to open bookmark dialog in document editor.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
// specifies the template string for the Document Editor component
template: `<div><button ejs-button (click)="showBookmarkDialog()" >Dialog</button>
<ejs-documenteditor #document_editor id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableEditorHistory]=true [enableBookmarkDialog]=true>
</ejs-documenteditor></div>`,
encapsulation: ViewEncapsulation.None,
providers: [EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService]
})
export class AppComponent {
@ViewChild('document_editor')
public documentEditor: DocumentEditorComponent;
public showBookmarkDialog(): void {
//Open the bookmark dialog.
this.documentEditor.showDialog('Bookmark');
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ButtonModule,
DocumentEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);