Skip to content

Commit b12e024

Browse files
sameerkhan001sameerkhan001
committed
Merge branch 'development' of https://github.com/syncfusion-content/document-processing-docs into 994201-dev
2 parents f512f36 + 32cc06c commit b12e024

File tree

89 files changed

+4083
-1342
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+4083
-1342
lines changed

‎Document-Processing-toc.html‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1423,16 +1423,35 @@
14231423
</ul>
14241424
</li>
14251425
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/interaction-mode">Interaction Mode</a></li>
1426-
<li>Form Designer
1426+
<li>Forms
14271427
<ul>
1428-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/create-programmatically">Create form fields programmatically</a></li>
1429-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
1428+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/overview">Overview</a></li>
1429+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-filling">Fill form fields</a></li>
14301430
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
1431-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-field-events">Form Field events</a></li>
1431+
<li>Create, Edit, Style and Remove Form Fields
1432+
<ul>
1433+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields">Create form fields</a></li>
1434+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields">Edit form fields</a></li>
1435+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields">Style form fields</a></li>
1436+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields">Remove form fields</a></li>
1437+
</ul>
1438+
</li>
1439+
<li>Import/Export form data
1440+
<ul>
1441+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/import-export-formfields/import-formfields">Import form data</a></li>
1442+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/import-export-formfields/export-formfields">Export form data</a></li>
1443+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/import-export-formfields/import-export-events">Import/Export events</a></li>
1444+
</ul>
1445+
</li>
1446+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/custom-data">Add custom data in form fields</a></li>
1447+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/group-formfields">Grouping form fields</a></li>
1448+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-constrain">Form constrains</a></li>
1449+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-validation">Form Validation</a></li>
14321450
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/custom-fonts-ts">Custom fonts</a></li>
1451+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-field-events">Form Field events</a></li>
1452+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/formfields-api">APIs</a></li>
14331453
</ul>
14341454
</li>
1435-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-filling">Form Filling</a></li>
14361455
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf">Organize Pages</a>
14371456
<ul>
14381457
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pages/overview">Overview</a></li>

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,95 @@ domainurl: ##DomainURL##
1212

1313
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.
1414

15+
## Enable the redaction toolbar
16+
17+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
18+
19+
The following example shows how to enable the redaction toolbar:
20+
21+
{% tabs %}
22+
{% highlight ts tabtitle="Standalone" %}
23+
24+
import { Component, ViewChild } from '@angular/core';
25+
import {
26+
PdfViewerComponent,
27+
LinkAnnotationService,
28+
BookmarkViewService,
29+
MagnificationService,
30+
ThumbnailViewService,
31+
ToolbarService,
32+
NavigationService,
33+
AnnotationService,
34+
TextSearchService,
35+
TextSelectionService,
36+
PrintService,
37+
FormFieldsService,
38+
FormDesignerService,
39+
PageOrganizerService,
40+
ToolbarSettingsModel
41+
} from '@syncfusion/ej2-angular-pdfviewer';
42+
43+
@Component({
44+
selector: 'app-root',
45+
template: `
46+
<div class="content-wrapper">
47+
<ejs-pdfviewer
48+
#pdfviewer
49+
id="pdfViewer"
50+
[resourceUrl]="resourceUrl"
51+
[documentPath]="documentPath"
52+
[toolbarSettings]="toolbarSettings"
53+
style="height:640px;display:block">
54+
</ejs-pdfviewer>
55+
</div>
56+
`,
57+
providers: [
58+
LinkAnnotationService,
59+
BookmarkViewService,
60+
MagnificationService,
61+
ThumbnailViewService,
62+
ToolbarService,
63+
NavigationService,
64+
AnnotationService,
65+
TextSearchService,
66+
TextSelectionService,
67+
PrintService,
68+
FormFieldsService,
69+
FormDesignerService,
70+
PageOrganizerService
71+
]
72+
})
73+
export class AppComponent {
74+
@ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent;
75+
76+
// Standalone mode (CDN) – keep this version aligned with your package
77+
public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
78+
public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
79+
80+
// Matches your JS toolbar configuration, with RedactionEditTool included
81+
public toolbarSettings: ToolbarSettingsModel = {
82+
toolbarItems: [
83+
'OpenOption',
84+
'UndoRedoTool',
85+
'PageNavigationTool',
86+
'MagnificationTool',
87+
'PanTool',
88+
'SelectionTool',
89+
'CommentTool',
90+
'SubmitForm',
91+
'AnnotationEditTool',
92+
'RedactionEditTool', // Redaction entry in the primary toolbar
93+
'FormDesignerEditTool',
94+
'SearchOption',
95+
'PrintOption',
96+
'DownloadOption'
97+
]
98+
};
99+
}
100+
101+
{% endhighlight %}
102+
{% endtabs %}
103+
15104
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.
16105

17106
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,95 @@ documentation: ug
1111

1212
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.
1313

14+
## Enable the redaction toolbar
15+
16+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
17+
18+
The following example shows how to enable the redaction toolbar:
19+
20+
{% tabs %}
21+
{% highlight ts tabtitle="Standalone" %}
22+
23+
import { Component, ViewChild } from '@angular/core';
24+
import {
25+
PdfViewerComponent,
26+
LinkAnnotationService,
27+
BookmarkViewService,
28+
MagnificationService,
29+
ThumbnailViewService,
30+
ToolbarService,
31+
NavigationService,
32+
AnnotationService,
33+
TextSearchService,
34+
TextSelectionService,
35+
PrintService,
36+
FormFieldsService,
37+
FormDesignerService,
38+
PageOrganizerService,
39+
ToolbarSettingsModel
40+
} from '@syncfusion/ej2-angular-pdfviewer';
41+
42+
@Component({
43+
selector: 'app-root',
44+
template: `
45+
<div class="content-wrapper">
46+
<ejs-pdfviewer
47+
#pdfviewer
48+
id="pdfViewer"
49+
[resourceUrl]="resourceUrl"
50+
[documentPath]="documentPath"
51+
[toolbarSettings]="toolbarSettings"
52+
style="height:640px;display:block">
53+
</ejs-pdfviewer>
54+
</div>
55+
`,
56+
providers: [
57+
LinkAnnotationService,
58+
BookmarkViewService,
59+
MagnificationService,
60+
ThumbnailViewService,
61+
ToolbarService,
62+
NavigationService,
63+
AnnotationService,
64+
TextSearchService,
65+
TextSelectionService,
66+
PrintService,
67+
FormFieldsService,
68+
FormDesignerService,
69+
PageOrganizerService
70+
]
71+
})
72+
export class AppComponent {
73+
@ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent;
74+
75+
// Standalone mode (CDN) – keep this version aligned with your package
76+
public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
77+
public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
78+
79+
// Matches your JS toolbar configuration, with RedactionEditTool included
80+
public toolbarSettings: ToolbarSettingsModel = {
81+
toolbarItems: [
82+
'OpenOption',
83+
'UndoRedoTool',
84+
'PageNavigationTool',
85+
'MagnificationTool',
86+
'PanTool',
87+
'SelectionTool',
88+
'CommentTool',
89+
'SubmitForm',
90+
'AnnotationEditTool',
91+
'RedactionEditTool', // Redaction entry in the primary toolbar
92+
'FormDesignerEditTool',
93+
'SearchOption',
94+
'PrintOption',
95+
'DownloadOption'
96+
]
97+
};
98+
}
99+
100+
{% endhighlight %}
101+
{% endtabs %}
102+
14103
## Add redaction annotations programmatically
15104

16105
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.

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png‎

35.2 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png‎

60.8 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png‎

20.7 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p
3737

3838
### Update using the property panel
3939

40-
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.
40+
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.
4141

4242
The property panel can be opened in two ways:
4343

@@ -47,6 +47,45 @@ The property panel can be opened in two ways:
4747
* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu.
4848
![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png)
4949

50+
#### General tab
51+
52+
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.
53+
54+
* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area.
55+
* Overlay Text – Enter the text to display.
56+
* Repeat Overlay Text – Tile the text to cover the whole region.
57+
58+
![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png)
59+
60+
* Font options – Choose family, size, color, and alignment for the overlay text.
61+
* Fill Color – Select the color that will fill the region after redaction is applied.
62+
63+
![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png)
64+
65+
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.
66+
67+
#### Appearance tab
68+
69+
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.
70+
71+
* Fill Color – Sets the annotation’s fill while you review and move/resize it.
72+
* Outline Color – Optional border for the annotation.
73+
* Fill Opacity – Controls how transparent the annotation appears during review.
74+
75+
Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings.
76+
77+
![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png)
78+
79+
### What changes after applying redaction?
80+
81+
When you click Apply Redaction:
82+
83+
* The selected content is permanently removed from the page.
84+
* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color.
85+
* 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.
86+
* 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.
87+
88+
5089
## Delete redaction annotations
5190

5291
Delete redaction annotations using any of the following:

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,49 @@ domainurl: ##DomainURL##
1212

1313
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.
1414

15+
## Enable the redaction toolbar
16+
17+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
18+
19+
The following example shows how to enable the redaction toolbar:
20+
21+
{% tabs %}
22+
{% highlight cshtml tabtitle="Standalone" %}
23+
<div class="text-center">
24+
<ejs-pdfviewer
25+
id="pdfViewer"
26+
style="height:640px; display:block"
27+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib"
28+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
29+
</ejs-pdfviewer>
30+
</div>
31+
<script type="text/javascript">
32+
window.onload = function () {
33+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
34+
// Include RedactionEditTool in the primary toolbar
35+
viewer.toolbarSettings = {
36+
toolbarItems: [
37+
'OpenOption',
38+
'UndoRedoTool',
39+
'PageNavigationTool',
40+
'MagnificationTool',
41+
'PanTool',
42+
'SelectionTool',
43+
'CommentTool',
44+
'SubmitForm',
45+
'AnnotationEditTool',
46+
'RedactionEditTool',
47+
'FormDesignerEditTool',
48+
'SearchOption',
49+
'PrintOption',
50+
'DownloadOption'
51+
]
52+
};
53+
}
54+
</script>
55+
{% endhighlight %}
56+
{% endtabs %}
57+
1558
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.
1659

1760
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,49 @@ documentation: ug
1111

1212
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.
1313

14+
## Enable the redaction toolbar
15+
16+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
17+
18+
The following example shows how to enable the redaction toolbar:
19+
20+
{% tabs %}
21+
{% highlight cshtml tabtitle="Standalone" %}
22+
<div class="text-center">
23+
<ejs-pdfviewer
24+
id="pdfViewer"
25+
style="height:640px; display:block"
26+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib"
27+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
28+
</ejs-pdfviewer>
29+
</div>
30+
<script type="text/javascript">
31+
window.onload = function () {
32+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
33+
// Include RedactionEditTool in the primary toolbar
34+
viewer.toolbarSettings = {
35+
toolbarItems: [
36+
'OpenOption',
37+
'UndoRedoTool',
38+
'PageNavigationTool',
39+
'MagnificationTool',
40+
'PanTool',
41+
'SelectionTool',
42+
'CommentTool',
43+
'SubmitForm',
44+
'AnnotationEditTool',
45+
'RedactionEditTool',
46+
'FormDesignerEditTool',
47+
'SearchOption',
48+
'PrintOption',
49+
'DownloadOption'
50+
]
51+
};
52+
}
53+
</script>
54+
{% endhighlight %}
55+
{% endtabs %}
56+
1457
## Add redaction annotations programmatically
1558

1659
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.

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png‎

35.2 KB
Loading

0 commit comments

Comments
 (0)