Skip to content

Commit 0a581e3

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
993766: javascript-es5 Redaction UG Updates
1 parent 6cc1b8f commit 0a581e3

32 files changed

+725
-0
lines changed

‎Document-Processing-toc.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1160,6 +1160,16 @@
11601160
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotation-event">Annotations Events</a></li>
11611161
</ul>
11621162
</li>
1163+
<li>Redaction
1164+
<ul>
1165+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/overview">Overview</a></li>
1166+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/programmatic-support.md">Programmatci Support</a></li>
1167+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/ui-interaction">UI-Interaction</a></li>
1168+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/toolbar">Toolbar</a></li>
1169+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/mobile-view">Mobile View</a></li>
1170+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/Redaction/search-redact">Search Text and Redact</a></li>
1171+
</ul>
1172+
</li>
11631173
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/interaction-mode">Interaction Mode</a></li>
11641174
<li>Form Designer
11651175
<ul>

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
layout: post
3+
title: Redaction in mobile view in JavaScript ES5 PDF Viewer | Syncfusion
4+
description: Learn how to apply redactions in mobile view using the Syncfusion JavaScript (ES5) PDF Viewer with a complete toolbar setup and redaction workflow.
5+
platform: document-processing
6+
control: PdfViewer
7+
documentation: ug
8+
---
9+
10+
# Redaction in Mobile View in JavaScript (ES5) PdfViewer Component
11+
12+
The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
13+
14+
![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png)
15+
16+
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
17+
18+
## Adding Redaction in Mobile View
19+
20+
To enable redaction functionality in your JavaScript (ES5) application, configure the PDF Viewer with the following setup:
21+
22+
```js
23+
var pdfviewer = new ej.pdfviewer.PdfViewer({
24+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
25+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
26+
toolbarSettings: {
27+
toolbarItems: [
28+
'OpenOption',
29+
'UndoRedoTool',
30+
'PageNavigationTool',
31+
'MagnificationTool',
32+
'PanTool',
33+
'SelectionTool',
34+
'CommentTool',
35+
'SubmitForm',
36+
'AnnotationEditTool',
37+
'RedactionEditTool', // Enables Redaction toolbar
38+
'FormDesignerEditTool',
39+
'SearchOption',
40+
'PrintOption',
41+
'DownloadOption'
42+
]
43+
}
44+
});
45+
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);
46+
pdfviewer.appendTo('#PdfViewer');
47+
```
48+
49+
## Understanding Mobile Redaction Toolbar Tools
50+
51+
When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow.
52+
53+
### Redaction Annotation Tool
54+
55+
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
56+
57+
Function: Creates visual redaction annotations that mark content for permanent removal
58+
Usage:
59+
Touch and drag to draw rectangular redaction overlays on any content area.
60+
61+
Process:
62+
- Selected content appears with a customizable overlay (default black)
63+
- Annotations remain editable until explicitly applied
64+
- Can be repositioned or deleted before final application
65+
66+
![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png)
67+
68+
### Page Redaction Tool
69+
70+
The Page Redaction tool enables batch redaction of entire pages based on specific patterns.
71+
72+
![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png)
73+
74+
Function: Redacts complete pages or page ranges with a single action
75+
Options Available:
76+
- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
77+
- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
78+
- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
79+
- Current Page: Redacts only the currently displayed page
80+
81+
Usage:
82+
Select desired pattern → Review affected pages in the viewer → Confirm redaction scope
83+
84+
![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png)
85+
86+
### Redaction Properties Tool
87+
88+
The Redaction Properties tool allows customization of redaction appearance before application.
89+
90+
![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png)
91+
92+
Function: Customize the visual appearance of redaction overlays and text replacement
93+
Customizable Properties:
94+
- Fill Color: Change the redaction overlay color (default: black)
95+
- Outline Color: Set outline color for redaction boxes (optional)
96+
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")
97+
- Text Color: Change overlay text color for better visibility
98+
- Text Font: Select font family for overlay text
99+
- Text Alignment: Position overlay text within redaction boxes
100+
- Text Size: Adjust overlay text size relative to redaction area
101+
102+
![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png)
103+
104+
## Enabling Redaction Mode in Mobile View
105+
106+
Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer.
107+
108+
![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png)
109+
110+
Step 2: From the redaction toolbar, select your desired redaction tool:
111+
- First Tool (Redaction Annotation): For selective content redaction
112+
- Second Tool (Page Redaction): For page-wide or pattern-based redaction
113+
- Third Tool (Redaction Properties): For appearance customization
114+
115+
Step 3: Configure your redaction parameters using the selected tool interface.
116+
117+
## Applying Different Redaction Types in Mobile View
118+
119+
### Selective Content Redaction
120+
1. Select Redaction Annotation tool (first button)
121+
2. Choose Content: Tap and drag over text or draw rectangular areas
122+
3. Preview: Check redaction overlays for accuracy
123+
4. Apply: Tap "Apply Redactions" button
124+
125+
### Page-Wide Redaction
126+
1. Select Page Redaction tool (second button)
127+
2. Choose Pattern: Select odd pages, even pages, or custom range
128+
3. Review: Verify affected pages in the viewer
129+
4. Apply: Confirm page redaction scope and apply
130+
131+
### Custom Appearance Redaction
132+
1. Select Redaction Properties tool (third button)
133+
2. Customize: Adjust colors, overlay text, and formatting
134+
3. Preview: See changes applied to existing annotations
135+
4. Apply: Use customized appearance for final redaction
136+
137+
## Applying Redactions in Mobile View
138+
139+
N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered.
140+
141+
Once you have configured redactions using any combination of tools.
142+
143+
Step 1: Review all redaction marks and configurations.
144+
145+
![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png)
146+
147+
Step 2: Tap the Apply Redactions button in the redaction toolbar
148+
149+
![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png)
150+
151+
Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone
152+
153+
![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png)
154+
155+
The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text).
156+
157+
![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png)
158+
159+
## Removing Redaction Annotations
160+
161+
To remove existing redaction annotations before they are applied:
162+
163+
- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode
164+
- Step 2: Tap on any existing redaction annotation you wish to remove
165+
- Step 3: Select Delete from the context menu that appears
166+
167+
Alternative: Tap redaction annotation → Use delete button in annotation properties panel
168+
169+
![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png)
170+
171+
N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified.
172+
173+
## See Also
174+
175+
* [Redaction Overview](./overview)
176+
* [UI Interaction](./ui-interaction)
177+
* [Programmatic Support in Redaction](./programmatic-support)
178+
* [Toolbar](./toolbar)
179+
* [Search Text and Redact](./search-redact)

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
layout: post
3+
title: Redaction annotation in Javascript PDF Viewer | Syncfusion
4+
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Redaction in JavaScript (ES5) PdfViewer
12+
13+
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.
14+
15+
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.
16+
17+
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)
18+
19+
## Add Redaction Annotations
20+
21+
You can mark specific content for redaction using the toolbar or through code.
22+
23+
Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity.
24+
25+
![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png)
26+
27+
## Delete Redaction Annotations
28+
29+
Redaction annotations can be removed easily:
30+
31+
- Click the **Delete** button on the toolbar, or
32+
- Select the annotation and press the **Delete** key.
33+
34+
![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png)
35+
36+
## Redact Entire Pages
37+
38+
The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically.
39+
40+
![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png)
41+
42+
## Apply Redaction
43+
44+
Once annotations are added, you can permanently apply them to the document. This action cannot be undone.
45+
46+
Use the **Apply Redaction** button on the toolbar or call the API method:
47+
48+
- The button is disabled until at least one redaction annotation exists.
49+
- It becomes active when redaction annotations are present.
50+
51+
![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png)
52+
53+
A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.
54+
55+
![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png)
56+
57+
N> After redaction is applied, the original content cannot be recovered.
58+
59+
## Comment Support
60+
61+
Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction.
62+
63+
Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments).
64+
65+
## Import and Export Redaction Annotations
66+
67+
You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions.
68+
69+
For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation-js).
70+
71+
## See also
72+
73+
* [Redaction UI interactions](./ui-interaction)
74+
* [Redaction Programmatic support](./programmatic-support)
75+
* [Redaction Toolbar](./toolbar)
76+
* [Redaction Mobile view](./mobile-view)
77+
* [Search Text and Redact](./search-redact)

0 commit comments

Comments
 (0)