Redaction toolbar customization in TypeScript

19 Nov 20253 minutes to read

The redaction toolbar in the Syncfusion JavaScript (ES6/TypeScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items.

Enable the redaction toolbar

To enable the redaction toolbar, configure the toolbarSettings.toolbarItems property of the PdfViewer instance to include the RedactionEditTool.

The following example shows how to enable the redaction toolbar:

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
    toolbarSettings: {
        toolbarItems: [
            'OpenOption',
            'UndoRedoTool',
            'PageNavigationTool',
            'MagnificationTool',
            'PanTool',
            'SelectionTool',
            'CommentTool',
            'SubmitForm',
            'AnnotationEditTool',
            'RedactionEditTool',   // Enables Redaction toolbar
            'FormDesignerEditTool',
            'SearchOption',
            'PrintOption',
            'DownloadOption'
        ]
    }
});

viewer.appendTo('#pdfViewer');

Refer to the following image for the toolbar view:

Enable redaction toolbar

Show or hide the redaction toolbar

You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the showRedactionToolbar method.

Display the redaction toolbar using the toolbar icon

When RedactionEditTool is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.

Show redaction toolbar from the primary toolbar

Display the redaction toolbar programmatically

You can also control visibility through code by calling viewer.toolbar.showRedactionToolbar(true/false).

The following example demonstrates toggling the redaction toolbar programmatically:

<!--Buttons in your HTML-->
<button id="showRedactionToolbar">Show Redaction Toolbar</button>
<button id="hideRedactionToolbar">Hide Redaction Toolbar</button>
document.getElementById('showRedactionToolbar').addEventListener('click', () => {
    viewer.toolbar.showRedactionToolbar(true);  // Show the redaction toolbar
});

document.getElementById('hideRedactionToolbar').addEventListener('click', () => {
    viewer.toolbar.showRedactionToolbar(false); // Hide the redaction toolbar
});

View Sample in GitHub

Refer to the following image for details:

Programmatically show the Redaction toolbar

See also