Redaction toolbar customization in Vue

24 Jun 20267 minutes to read

The redaction toolbar in the Vue PDF Viewer can be customized by rearranging items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions within the existing toolbar.

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:

<template>
  <div>
    <div class="control-section">
      <ejs-pdfviewer
        id="container"
        :documentPath="documentPath"
        :resourceUrl="resourceUrl"
        :toolbarSettings="toolbarSettings"
        style="height: 680px"
      />
    </div>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      toolbarSettings: {
        toolbarItems: [
          'OpenOption',
          'UndoRedoTool',
          'PageNavigationTool',
          'MagnificationTool',
          'PanTool',
          'SelectionTool',
          'CommentTool',
          'SubmitForm',
          'AnnotationEditTool',
          'RedactionEditTool',
          'FormDesignerEditTool',
          'SearchOption',
          'PrintOption',
          'DownloadOption'
        ]
      }
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      Annotation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      FormFields,
      FormDesigner,
      PageOrganizer
    ]
  }
};
</script>

Refer to the following image for the toolbar view:

Enable redaction toolbar

Show or hide the redaction toolbar

The redaction toolbar can be toggled 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

Programmatic control is available via the viewer instance. For example, call this.pdfViewer.toolbar.showRedactionToolbar(true) to display the redaction toolbar, or this.pdfViewer.toolbar.showRedactionToolbar(false) to hide it.

The following example demonstrates toggling the redaction toolbar programmatically:

<template>
  <div class="content-wrapper">
    <div style="margin-bottom: 8px; display: flex; gap: 8px;">
      <button type="button" @click="showRedactionToolbar">Show Redaction Toolbar</button>
      <button type="button" @click="hideRedactionToolbar">Hide Redaction Toolbar</button>
    </div>
    <ejs-pdfviewer
      ref="pdfviewer"
      id="container"
      :resourceUrl="resourceUrl"
      :documentPath="documentPath"
      :toolbarSettings="toolbarSettings"
      style="height: 640px; display: block;"
    />
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      toolbarSettings: {
        toolbarItems: [
          'OpenOption',
          'UndoRedoTool',
          'PageNavigationTool',
          'MagnificationTool',
          'PanTool',
          'SelectionTool',
          'CommentTool',
          'SubmitForm',
          'AnnotationEditTool',
          'RedactionEditTool',
          'FormDesignerEditTool',
          'SearchOption',
          'PrintOption',
          'DownloadOption'
        ]
      }
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      Annotation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      FormFields,
      FormDesigner,
      PageOrganizer
    ]
  },
  methods: {
    showRedactionToolbar() {
      const inst = this.$refs.pdfviewer?.ej2Instances;
      if (!inst) return;
      inst.toolbar.showRedactionToolbar(true);
    },
    hideRedactionToolbar() {
      const inst = this.$refs.pdfviewer?.ej2Instances;
      if (!inst) return;
      inst.toolbar.showRedactionToolbar(false);
    }
  }
};
</script>

View Sample in GitHub

Refer to the following image for details:

Programmatically show the Redaction toolbar

See also