diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md index a9805f598..e0fbcc84b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md @@ -12,6 +12,95 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Angular PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
+ + +
+ `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + N> Prerequisites: Add the PdfViewer control to your Angular application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md index bf8f9ef58..f0ac83335 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md @@ -11,6 +11,95 @@ documentation: ug The Syncfusion Angular PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
+ + +
+ `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md index 0a179c659..dbf0aec0c 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,45 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md index e596b76cf..789862082 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md @@ -12,6 +12,49 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET Core PDF Viewer lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
+ + +
+ +{% endhighlight %} +{% endtabs %} + N> Prerequisites: Add the PdfViewer control to your ASP.NET Core application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md index 34a5d2708..9beadd350 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md @@ -11,6 +11,49 @@ documentation: ug The Syncfusion ASP.NET Core PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
+ + +
+ +{% endhighlight %} +{% endtabs %} + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md index 582c4e63f..2b46addc4 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,44 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md index 38aafd2bf..ce8981404 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md @@ -12,6 +12,48 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET MVC PDF Viewer lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
+ @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
+ +{% endhighlight %} +{% endtabs %} + N> Prerequisites: Add the PdfViewer control to your ASP.NET MVC application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md index 166c27d7a..89bf13793 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md @@ -11,6 +11,48 @@ documentation: ug The Syncfusion ASP.NET MVC PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
+ @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
+ +{% endhighlight %} +{% endtabs %} + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md index ec9fc5044..fada3844e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,44 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md index 9b5b7e177..251095a98 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md @@ -12,6 +12,39 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +```js +var pdfviewer = new ej.pdfviewer.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' + ] + } +}); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); +pdfviewer.appendTo('#PdfViewer'); +``` + N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md index b926065f7..88b5c9196 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md @@ -11,6 +11,39 @@ documentation: ug The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +```js +var pdfviewer = new ej.pdfviewer.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' + ] + } +}); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); +pdfviewer.appendTo('#PdfViewer'); +``` + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md index ba2f99a8b..d4ca4bf74 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,45 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md index c2d5babfb..5698ce23a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md @@ -12,6 +12,43 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +```ts +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'); +``` + N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md index 7a6c86a86..93ab9b618 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md @@ -11,6 +11,43 @@ documentation: ug The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +```ts +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'); +``` + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md index ba404d55d..e3aa8797d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,44 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md index 3727b61c3..50cff678f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md @@ -12,6 +12,62 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
+
+ + + +
+
); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + N> Prerequisites: Add the PdfViewer control to your React application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md index fe19d62f4..5e0db5078 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md @@ -11,6 +11,62 @@ documentation: ug The Syncfusion React PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
+
+ + + +
+
); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md index fba7bbb7d..f0ddd480e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,44 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + ## Delete redaction annotations Delete redaction annotations using any of the following: diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md index 8dc760b28..288120519 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md @@ -12,6 +12,94 @@ domainurl: ##DomainURL## Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Vue PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +## 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: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + N> Prerequisites: Add the PdfViewer control to your Vue application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md index 4db3b39d5..ce7852ed7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md @@ -11,6 +11,94 @@ documentation: ug The Syncfusion Vue PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +## 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: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + ## Add redaction annotations programmatically You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md index b4fd75943..c50de00d7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p ### Update using the property panel -When a redaction annotation is selected, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: @@ -47,6 +47,44 @@ The property panel can be opened in two ways: * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + ## Delete redaction annotations Delete redaction annotations using any of the following: